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'd like to be able to configure controlsBelow and controlsHiding (always show controls below), but the only way I found to be able to do that is with VideoJS.setupAllWhenReady() (which appears to be a previous version of VJS), not with videojs() as the current docs (v4.12, at the time of this post) say to use. Nothing in the doc's option page mentions either of these options, so perhaps it's not supported anymore?
var setup = {
"techOrder" : ['html5', 'flash'],
"controls": true,
"preload": "auto",
"children": {
"controlBar": {
"children": {
"volumeMenuButton": true,
"muteToggle": false,
"volumeControl": false // displays volume control bar atop button
}
}
}
};
var player = videojs('player', setup, function(){
var myPlayer = this;
myPlayer.play();
});
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<div class="video-js-box">
<video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-block-error" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<param name="bgcolor" value="#f30000">
<param name="wmode" value="opaque">
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
</div>
After pretty thoroughly reading through the code, I don't see either of these options being available as I feared (I was just hoping someone might know something I didn't). I had already set the control bar to always display (don't fade out after a brief period of user inactivity, as is the default behavior) and to display below the video rather than on top of it via CSS, but in fullscreen mode the control bar would slip beneath the browser's viewport (eek). I ended up adding a :not() selector to keep the default behavior in fullscreen mode. That'll work for me.
var setup = {
"techOrder" : ['html5', 'flash'],
"controls": true,
"preload": "auto",
"children": {
"controlBar": {
"children": {
"volumeMenuButton": true,
"muteToggle": false,
"volumeControl": false // displays volume control bar atop button
}
}
}
};
var player = videojs('player', setup, function(){
var myPlayer = this;
myPlayer.play();
});
/* force control bar to display at all times if not in fullscreen mode */
.vjs-default-skin:not(.vjs-fullscreen).vjs-has-started .vjs-control-bar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* move under video if not in fullscreen (else it will disappear below the browser viewport */
.vjs-default-skin:not(.vjs-fullscreen) .vjs-control-bar {
bottom: -30px;
}
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<div class="video-js-box">
<video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-block-error" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<param name="bgcolor" value="#f30000">
<param name="wmode" value="opaque">
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
</div>
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!