I can paste a live-streaming URL in VLC and it plays. Here is the media information provided by VLC:
The URL is of the format http://***.flv I am assuming this is FLV container. But I can only guarantee what I see in the screenshot above.
It is possible to embed this live streaming video in HTML which will work on modern Chrome and/or iOS/Safari devices?
This is the code I tried:
<video controls id="video" width="320" height="240" preload autobuffer >
<source src="http://***.flv" type="video/mp4" />
</video>
In Mac/Chrome this only attempts to download the "whole" file. Of course, the file is infinite, so this will never actually play.
Take a look at videojs, you can use it to stream flv because it mimics the video tag. The following example allows to stream a rtmp live feed inside a html5 video tag.
<video id="myvideo" class="video-js vjs-default-skin"
controls preload="auto" width="320" height="240"
poster="yourposter.png"
data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>
Related
Exist any posibily to put to video player HTML5 as source a video from youtube?
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I want to embed videos from youtube using HTML5 player. I've tried this solution but it's not working.
TRY USING IFRAMES instead of <video>. I'ts not possible to embed youtube videos using HTMl5 video tag.
Try this it will work
<iframe type="text/html"
width="320" height="240"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>
Your options are outlined in the Developer API for youTube here: https://developers.google.com/youtube/player_parameters
There are restrictions on what you can/can't do with the content they are hosting (they are, after all, paying for storage, bandwidth, transcoding etc), so if you need more flexibility you will need to find your own video hosting solution
I'm trying to create a html5 videoplayer on my site, but if when I try to insert the file like so:
<video width="320" height="240" autoplay>
<source src="gevelreclame.mp4" type="video/mp4">
<source src="gevelreclame.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
it doesn't work at al, I have another video file (also mp4) which just works when implemented in the same way
EDIT
both the files are not working now, i've changed only the filenames and they just don't work anymore..
I want to play .mov video like as this, but video doesn't play in any browser.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mov">
</video>
You can use below code:
<video width="400" controls autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
this code will help you.
Instead of using <source> tag, use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="mov1.mov"></video>
or
you can give multiple tags within the tag, each with a different video source. The browser will automatically go through the list and pick the first one it’s able to play. For example:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
If you test that code in Chrome, you’ll get the H.264 video. Run it in Firefox, though, and you’ll see the Ogg video in the same place.
Unfortunately .mov files are not supported with html5 video playback. You can see what filetypes are supported here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
If you need to be able to play these formats with your html5 video player, you'll need to first convert your videofile--perhaps with something like this:
https://www.npmjs.com/package/html5-media-converter
Content Type for MOV videos are video/quicktime in my case. Adding type="video/mp4" to MOV video file solved issue in my case.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
in the video source change the type to "video/quicktime"
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/quicktime">
</video>
You can use Controls attribute
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
My new answer is to use ffmpeg to transcode the .mov like ffmpeg -i sourceFile.mov destinationFile.mp4. Do same for the webm format.
OLD Answer:
Here's what you do:
Upload your video to Youtube.
Install the "Complete YouTube Saver" plugin for Firefox
Using the plugin in Firefox, download both the MP4 and WEBM formats and place them on your Web server
Add the HTML5 Video element to your webpage per MDN's recommendation
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
Style the <video> element with CSS to suit your needs. For example Materializecss has a simple helper class to render the video nicely across device types.
I am using following code to play manifest.f4m vod stream through wowza media server.but it is not working Please help if anybody knows.
<video width="320" height="240" controls>
<source src="http://localhost:1935/vod/_definst_/mainVideo/smil:mainVideo.smil/manifest.f4m" type="video/mp4">
Your browser does not support the video tag.
</video>
As of this time, HTML5 does not support raw f4m. Consider converting the video file to a compatible format.
<video width="320" height="240" controls>
<source src="http://localhost:1935/vod/_definst_/mainVideo/smil:mainVideo.smil/manifest.f4m" type="video/f4m">
Your browser does not support the video tag.
</video>
try this code...
Recently I started a college project where I would have a video as a background on my HTML5 index page. I had it working perfectly with a stock video but when I made my own video and converted it to .mp4, .ogv and .webm all I get now is the blank black screen. I see no fault in the code:
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted volume="0">
<source src="backgroundvideo.webm" type="video/webm"/>
<source src="backgroundvideo.ogv" type="video/ogg ogv"; codecs="theora, vorbis"/>
<source src="backgroundvideo.mp4" type="video/mp4"/>
Video not supported
</video>
Could it be the movie converter I used? I used Miro Video Convertor.
Provided the videos are stored in the same directory as the HTML, and you have the filenames correct, this should be fine. If you've tried it in several different browsers (I assume you have) then, yes, it's probably the video encoding.