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!
Related
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?
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>
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 hide the default play button in ios/android mobile devices for HTML video?
I am using video.js with the following html
<video id="battery_video" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="720" height="480"
poster="/videoLibrary/data/thumbnails/Battery.jpg"
data-setup='{"example_option":true}'>
<source src="/videoLibrary/data/video/Battery.mp4" type='video/mp4' />
</video>
Things look like I want on the desktop browsers but ios/android are dropping a play button in.
At this time it doesn't look like there's a way to hide the play button.
videoplayer.bigPlayButton.hide();