I have a video running in the background of my website. It's HTML5 with a jpg fallback.
I use this HTML
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="video/nieuw.mp4" />
<source src="video/nieuw.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="video/nieuw.ogg" type="video/ogg; codecs=theora,vorbis" />
<img src="img/bg1.jpg" alt="bg" />
</video>
I have fiddled around with the sequence of these <source> files, and I have fiddled a lot with converting tools. I used MIRO convertor, VLC, iMovie etc.. etc...
But I always end up with at least one browser that doesnt show the movie, for example Safari on Mac desnt work, all other browsers do. Or All browsers but windows / Chrome doesnt work. And it's driving me mad.
Can you guys please post your best practices? What sequence of html5 code do you use, and which program / settings do you use to convert the movie?
Thanks a lot!
It's 2016, MPEG-4/H.264 video format has won the battle, you can drop webm and ogv http://caniuse.com/#feat=mpeg4
Convert with AWS Elastic transcoder
The best way to do is integrate any player(like jwplayer) as the video tags are not supported by all browsers and convert all videos in one common format at time of upload as per your player support using any library like ffmpeg lib.
http://www.w3schools.com/html/html5_video.asp
Codecs are beyond the scope of the w3c specification. Zencoder has a pretty good blog post about this exact issues here:
https://www.brightcove.com/en/resources/blog/what-formats-do-i-need-for-html5-video/
Ok, I got it working in every common browser, with a fallback for the olders ones. I used VLC to convert the files, and used the HTML below:
<video id="video_background" volume="0" muted="muted" loop="loop" autoplay="true" preload="auto">
<source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="video/pr6.mp4"></source>
<source type="video/webm; codecs=vp8,vorbis" src="video/pr6.webm"></source>
<source type="video/ogg; codecs=theora,vorbis" src="video/pr6.ogv"></source>
<img alt="bg" src="img/bg1.jpg">
</video>
Related
i was looking for a way to run video with srt subtitle without converting it to vtt i tried to many players and all requires vtt, now i am working on videojs
<video id="my-video" class="video-js" style="margin:0 auto;margin-bottom: 60px;" controls preload="auto" width="900" height="500" poster="poster.jpg" data-setup="{}">
<source src="mp4.mp4" type='video/mp4'>
<track kind='captions' src='srt.srt' srclang='en' label='English' />
<track kind='captions' src='srt.srt' srclang='ar' label='Arabic' default />
</video>
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>js.zencdn.net/5.19.2/video.js"></script>
So SRT files happened to work with versions of VideoJS up to 4.11, even though they weren't officially supported, but SRTs no longer work in 4.12 (because of the use of vtt.js, which greatly improves support for WebVTT files). This isn't specifically documented.
And for your quick results either you downgrade your video.js to 4.11 or use bubbel.js here is one of the example implemented with bubble.js
https://github.com/pkalogiros/BubblesJS/blob/master/example.html
I'm creating a webpage that is using HTML5 for videos. I tried one video, and it loaded and played successfully. But then, the other video does not even load. How can I fix this? The code is the same for the working video and the not working video
<video src="SnakeVids/sukyandaru.mp4" width="350" height="300" controls="controls" type="video/mp4"></video>
Btw, the difference is that the first video is a .mp4, and the other one I converted from .flv to .mp4.
After reading the comments, it looks like your video was converted into a format that is not compatible with Google Chrome. MP4 supports some codecs but only a small subset is widely supported, and Chrome supports these video formats for the <video> tag.
You should encode your video using a supported codec.
Additionally, you might want to provide different sources for compatibility with other browsers and platforms.ogg is a safe choice. A simplified example extracted from w3schools:
<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>
You can also use third-party libraries, like videoJS, that will help you with video formats support. Some of them even have a flash fallback.
I am trying to add a inline sound in a web page but when i add and open the web page it plays automatically..I used <object>,<embed> everything but autostart="false" and autostart="0" is not working in IE,Mozilla and Chrome.I also tried to add inline video but it is also not playing.Please help me.I really need a help.
You should use the HTML5 way of doing it. The current major browsers can do fine with that. The big advantage: No need for extra plugins and bogous <object> and <embed> tags.
Example for embedding audio:
<audio controls="controls">
<source src="sound-ogg.ogg" type="audio/ogg" />
<source src="sound-mp3.mp3" type="audio/mpeg" />
</audio>
See w3schools HTML5 audio on this topic for better examples and explanation.
Video is as easy:
<video width="800" height="600" controls="controls">
<source src="video-ogg.ogg" type="video/ogg" />
<source src="video-mpeg.mpg" type="video/mp4" />
<source src="video-webm.webm" type="video/webm" />
</video>
Again, w3schools has a deeper explanation with examples.
To convert audio and video to the required formats, I use Handbrake.
For an multi-browser support (HTML5 and no HTML5) take a look at video.js. In my humble opinion, this is the best way of including video content.
I know that object tag embeds objects in html and useful for playing videos/audios.
When we specify object with type="video/mpeg" does this use the default player in the device
I am having an issue in playing mp4 files. When i use object tag.
It is able to play mpeg-2 transport stream though.
Also the device player specs says they support mp4.
Am i missing anything here.
You might get help from this website mentioned in this answer to a similar question.
Edit:
html object tag has some limitations like the other tags used to play videos. I think this will give you a more clear idea. There you'll see that the best solution is to use 3 different methods together like this:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
Your browser does not support video
</embed>
</object>
</video>
In this example, The HTML 5 video element tries to play the video either in mp4, ogg, or webm formats. If this fails, the code "falls back" to try the object element. If this also fails, it "falls back" to the embed element.
And the easiest way to display videos in HTML is to use YouTube.
Anyway, you'll understand it better if you read the whole thing there.
What possibilities are there for inserting and showing videos on a webpage that
don't require additional plugins or installations from the user and
can be used for other than the .flv format (.f4v, .avi e.g.)
At SO I found a few questions like this: stackoverflow.com[...], but they are only about .flv-players. Is that because there is nothing else?
I know there are many, many formats and no tool can handle them all. But is it at all possible to show any other than .flv formats without extra plugins? I have never found any.
Thank you.
Most latest technology is HTML5 with <video> tag
The <video> tag specifies video, such as a movie clip or other video streams.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Documentation
Now most of the browsers supports HTML5 so no worry of using + don't require additional plugins or installations
Check out http://www.longtailvideo.com/players/
It also has a wmv player: http://www.longtailvideo.com/players/jw-wmv-player/