Having difficulty with video.js (currently at 5.1.9, tested with latest 6.2.0) and the default flag for language tracks. Doesn't appear the default flag is respected - the tracks always default to English (en).
<video
class="video-js vjs-default-skin"
controls
preload="auto"
width="640"
height="360"
poster="http://localtest.site/poster/SubtitleTest.jpg"
data-setup='{}' >
<source src="http://localtest.site/video/SubtitleTest_1200k.mp4" type="video/mp4">
<track kind="captions" src="http://localtest.site//tracks/SubtitleTest_nl.vtt" srclang="nl" label="Dutch" default />
<track kind="captions" src="http://localtest.site//tracks/SubtitleTest_en.vtt" srclang="en" label="English" />
<track kind="captions" src="http://localtest.site/tracks/SubtitleTest_es.vtt" srclang="es" label="Spanish" />
</video>
It's successfully implemented in the page and the 3 language tracks are switchable, but the the video always begins with the English track. The 'default' flag is never respected.
(Note: After much testing, it does seem to work under video.js v4.9.1; nothing later works with the default flag.)
Am I not initialising something correctly for 5.x?
Related
It seems that just adding the remote file in the src property is not enough for Chrome.
<video width="720" height="400" >
<source src="http://mysite/master.m3u8" type="video/mp4" />
</video>
Try type="application/x-mpegURL" on the source, or
<video width="720" height="400" src="http://mysite/master.m3u8"></video>
When trying to play/test a video (MP4) on my web page, I select the play button and see this every time:
Video Could Not Be Decoded
That shows up after about 7 seconds of play in IE11, yet it plays fine in Chrome and Firefox. Any ideas?
Environment:
video-js player-v4.11.4, with a flowplayer fallback
IE11
Windows 7 PC
Here is the player code:
<video id="_1200k.mp4" class="video-js vjs-default-skin"
preload="none" width="445" height="340" controls
poster="[var.thumb_file]" data-setup='{techOrder: [‘flash’,’html5’}'>
<source src="http://..........s3.amazonaws.com/[var.video_play]" type='video/mp4' />
<object class="vjs-flash-fallback" width="445" height="340" type="application/x-shockwave-flash" data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="/flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["/[var.thumb_file]", {"url": "http://.........s3.amazonaws.com/ [var.video_play]","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="[var.thumb_file]" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
Although I haven't personally tested this, I feel very confident saying that there's very little chance that the Flowplayer fallback works as a drop-in replacement for the Video.js swf. Why are you doing this in the first place, when Video.js has its own fallback?
I'd be surprised if you weren't seeing other issues as well. For instance, the example you provided has invalid JSON in the data-setup attr, so that should throw a JSON parse error.
So back to the original question about Flash fallbacks...if you're attempting to play an mp4 back in IE11, why are you forcing Flash in the first place? IE11 supports h264 natively, so a Flash fallback is unnecessary.
Altogether, your <video> tag should look something like this:
<video id="_1200k.mp4" class="video-js vjs-default-skin" preload="none"
width="445" height="340" controls poster="..." data-setup='{}'>
<source src=".../movie.mp4" type="video/mp4"></source>
</video>
Currently the desktop version of my site uses flash player ( flowplayer) to stream videos.I would like to have a fallback to html5 just in case flash isn't available
So in case flash is not available , html5 should be used by default and the video should autoplay
I tried the following code but both flowplayer and html5 seems to load the video at the same time.I noticed that when i pause the video(playing with flowplayer) , i can still hear the video, implying that html5 player is loading the video as well.
<object id="flowplayer" width="640" height="360" data="./flowplayer-3.2.18.swf" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value=\'config={"clip":"./test.mp4", "plugins": {"controls": {"autoHide" : false} }}\' />
<video width="100%" height="100%" controls preload autoplay>
<source src="./test.mp4" type="video/mp4" />
</video>
</object>
Any help is appreciated
I am using VideoJS to play the video and it plays well without any issue.
But the video keeps on looping which I don't want. It does not stop after playing once. I have not provided any options for the video to play in loop; but it does.
I even tried adding data-setup with loop as false.
<video id="video5" class="video-js vjs-default-skin" controls preload="none" width="500" height="400" data-setup='{ "loop" : "false" }' >
<source src="http://localhost/~~video(4).mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2" />
</video>
I am using version 4.5.2 which is the latest build.
What I am doing wrong?
Is there a way to use something like this:
<video width="320" height="240" controls="controls">
<source src="http://www.youtube.com/v/YJp7tqRyJAI" type="video/mp4" />
<source src="http://www.youtube.com/v/YJp7tqRyJAI" type="video/ogg" />
Your browser does not support the video tag.
</video>
I've looked into the api and all I've found is that i can use an iframe which embeds a flash version... But on Google I've found people wondering how to build a custom ui or an autoplay feature with the html5-youtube-api...
http://www.filsh.net/ did the job!