I have a video slider with .webm,.mp4 & .ogv media formats.
as webm is a much smaller size, I want to force the use of .webm if the browser/device can support the format.
You can specify a priority of formats by the way you arrange the source tags for the video. If the browser supports the first format listed it will use that, if not it will continue to the next and so on.
Example:
This will try the webm format first, if browser cannot play it the theora version is tried and finally mp4 if that didn't work either (finally a fallback if none are supported) (borrowed from wikipedia) -
<video poster="movie.jpg" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<p>This is fallback content to display for user agents that do not
support the video tag.</p>
</video>
Related
I am using the Ajaxuploader for users to upload videos. Some of them are freezing on playback and I've just realised that it's the FullHD ones. HD plays fine. Is there a way I can force the user to upload in HD only or is there a way to resize on upload? I am using VB.Net for my backend. I'm even trialing a CDN at the moment but it's not making much difference. The video takes a while to start, buffer goes straight up but they still freeze when playing.
<video playsinline ID="videoToPlay" poster="https://www.myurl.co.uk/files/images/videoPoster.jpg" runat="server" object-fit:contain autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
videoToPlay.src="https://myurl.b-cdn.net/" & session("video")
I'd like to have two m3u8 sources, so when one is not available it skips to the next one. Is this possible?
I usually do that with html5 video as this:
<video controls="" height="" poster="" width="">
<source src="xxx.m3u8" type="application/x-mpegURL"></source>
<source src="xxx.m3u8" type="application/x-mpegURL"></source>
</video>
In don't know how to do it with video.js, as just putting the two sources doesn't work.
Thanks.
That's what u need - VideoJS Error Event
I have some videos I try to convert with Blender into a format which could be rendered by the most modern Browsers. I tried many different Settings and neither IE nor Firefox was able to decode the files. (Windows Media Player always did.)
I use the following html code:
<video width="320" height="240" controls>
<source src="data/test.avi">
Your browser does not support the video tag.
</video>
Is this correct?
I tried different formats, codecs and reslolutions. (mpeg-4, h.264, ogg, theora).
Do you have any suggestions?
Edit:
Ogg-Theora does run in Firefox and Chrome, but not in IE.
This is and has always been an issue, that is, format "wars" - which format to use, both for audio and video.
Unfortunately (depending on what angle you look at it) there is not one single format to rule them all, so you actually have to provide as many as "possible". By possible at least the three main formats:
MP4
Ogg Video
WebM
You can choose priority by defining the source tag in the order you prefer them to be used:
<video width="320" height="240" controls>
<source src="data/test.mp4" type="video/mpeg" />
<source src="data/test.ogv" type="video/ogg" />
<source src="data/test.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Hope this gives some input.
I have two mp4 source files, one encoded for desktop and one for mobile. Video.js is serving the wrong one to iPhone and iPad and they cannot be played. How can I tell Video.js which one to serve to these devices?
--Edit to add more info and clarify:--
I am using Video.js version 3.2.0, but the same problem occurs in 4.0.
The reproducible problem I am having is that some videos are not playing on older iOS devices - 1st gen iPad and iPhone 3GS. I believe it is because Video.js is playing the first mp4 in the source list instead of the one encoded for mobile.
My Video.js player code looks like this:
<video id="video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="390"
poster="https://s3.amazonaws.com/sightingsreport/videos/1748/dthumbnail_0000.png"
data-setup="{}">
<source src="https://s3.amazonaws.com/sightingsreport/videos/1748/default.mp4"
type='video/mp4' />
<source src="https://s3.amazonaws.com/sightingsreport/videos/1748/movie.webm"
type='video/webm' />
<source src="https://s3.amazonaws.com/sightingsreport/videos/1748/mobile.mp4"
type='video/mp4' />
</video>
If I move the mobile.mp4 source to be first in the list, it plays on the old iOS devices, but it also appears to use that one on non-mobile devices.
I thought Video.js was supposed to automatically serve the best source file for the device. Is that not correct?
What is the best way to handle this?
i would do it with php like ..
<?PHP
$isiPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$isiPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$isiPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$isiDevice = $isiPod || $isiPhone || $isiPad ;
?>
..and..
<video id="video_player" class="video-js vjs-default-skin">
<?PHP if($isiDevice ) { ?>
<source src="mobile.mp4" type='video/mp4' />
<?PHP } else { ?>
<source src="desktop.mp4" type='video/mp4' />
<?PHP } ?>
</video>
This is a major bug in video.js. It checks for canPlayType() on each of the sources and select only the first one to use instead of keeping the multiple sources that the browser can select from.
Basically, it's impossible right now to have a fallback video of the same type.
I've submitted an issue on Github related to this:
https://github.com/videojs/video.js/issues/662
I embed the js through cdn.
my img source and video source all load from romote disk,the img can't scale to the player size.
when I click the play button,but can't play the video.
my website linkļ¼
http://www.zeguoren.com/thread-6463-1-1.html
According to W3C HTML5 specifications:
The image given by the poster attribute, the poster frame, is intended
to be a representative frame of the video (typically one of the first
non-blank frames) that gives the user an idea of what the video is
like.
So you should use an image for the poster attribute that fit to the size of video.
If you want to see poster img, you also have to set preload attribute to 'none' or 'metadata' (see here).
About video, Internet Explorer 9 support only .mp4 format. So you should add a source:
<video data-setup="{}" poster="http://img142.poco.cn/[...]2043.jpg"
preload="none" class="vjs-tech" id="my_video_1" tabindex="0">
<source type="video/mp4" src="http://storage.live.com/items/F[...]2B!290?a.mp4"></source>
<source type="video/webm" src="http://storage.live.com/items/F[...]2B!290?a.webm"></source>
</video>