I just started using VideoJS. Quite impressed with the ease of initial setup of the Javascript library and the clean integration of videos into web pages.
However I encountered an issue of displaying subtitles in a foreign language (e.g. Chinese). The following is the code for embedding video
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640"
height="264" poster="Image/oceans-clip.png" data-setup="{}">
<source src="Video/oceans.mp4" type='video/mp4'/>
<track kind="captions" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
<track kind="captions" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
<track kind="subtitles" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
The issues I have are:
1) The Chinese captions in "demo.captions_C.vtt" are not displayed, even if it is set as default. Instead, captions in "demo.captions.vtt is " are displayed.
2) I tried to select "Chinese" in the caption menu. There was no response and no change.
The "demo.captions_C.vtt" is provided below:
WEBVTT
00:00.000 --> 00:02.332
这是中文字幕
00:02.332 --> 00:10.947
海鸥的英雄礼赞音乐
00:10.947 --> 00:17.691
大海在咆哮
00:17.691 --> 00:50.279
鲸鱼在召唤
The only difference (apart from contents) I can tell between demo.captions.vtt and demo.captions_C.vtt is that the latter uses utf8 encoding, while the first one is using us-ascii.
I am wondering (a) if I have missed anything in the html code in integrating with the video tag in configuring tracks. Why only English is displayed. (b) has anyone successfully used vtt file that is using UTF-8 encoding? please let me know your procedures.
Here is a working example with Chinese subtitles:
https://jsfiddle.net/xrpnbwfz/1/
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" data-setup='[]'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<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.ogg" type='video/ogg; codecs="theora, vorbis"' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' default />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
If you are using the latest version 4.12, there are some known issues with captions/subtitles: https://github.com/videojs/video.js/issues/1888 https://github.com/videojs/video.js/issues/1904
https://github.com/videojs/video.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+caption
Related
I use fullpage.js on my page. I set scrollbar:true,so i want to track scroll position on certain slide to make images load on reveal. If there's a way to use lazy load for images with transition effect on scroll?
fullPage.js provides lazy loading, check it out.
<img data-src="image.png">
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>
adaptives links for mpeg dash on wowza server not working with me, the following are the steps that I used to publish video on wowza:
I install and configure Wowza server, and I tested it and it is working fine.
Transcode this video using ffmepg (I bring these command from wowza documentation)
I test the files and all of them workig fine then I moved these files to wowza content folder and create the smil file as following:
<?xml version="1.0" encoding="UTF-8"?>
<smil title="sintel">
<body>
<switch>
<video width="320" height="180" src="sintel_320p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="200000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="640" height="360" src="sintel_640p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="520000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="320" height="180" src="sintel_400p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="270000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="420" height="270" src="sintel_700p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="570000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="720" height="406" src="sintel_1100p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1000000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="1024" height="576" src="sintel_1300p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1200000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="1080" height="608" src="sintel_1500p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1400000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
</switch>
</body>
</smil>
I use the mpd file (http://191.237.26.137:1935/vod/smil:sintel.smil/manifest.mpd) with http://www.jwplayer.com/innovation/roadmap/mpeg-dash/
Result: the video work for first few seconds the stop
It looks like from your description that there is keyframe alignment problem between the files. For switching to occur smoothly, each rendition must be key frame aligned meaning that a key frame that occurs at a specific timecode in one file must also occur at the same timecode in all of the other files. The default option with Dash is to request video segments are created and named based on the keyframe timecodes. If the player switches to a rendition that doesn't have a specific segment that is requested (because its key frame timing is off) then it will fail with a 404 response.
Wowza server builds the HTTP manifests dynamically from the moov atom data in the media files. In the case with an Adaptive bitrate manifest, it only reads the data from the first file and expects that the data will be identical in the other files. The default file plays fine because that was the one that the data came from and individual files play fine because fresh data is extracted from the file when each file is requested.
Id based segmentation (where the segments contain multiple key frames and are numbered sequentially, such as is used with HLS or HDS) is less susceptible to alignment problems however, you may notice the stream jumping forward or backwards if it switches to a different rendition and the timecodes in the new chunk don't align with the old chunk. Mpeg Dash can be configured to use ID based segmentation by changing the manifest url. See Delivery Formats for details.
Ffmpeg may do a better job at creating aligned encodings by disabling scene detection or doing two pass encoding and using the same first pass log for each second pass.
I have a single page website which lists a collection of HTML5 audio players. The problem is the site has become slow because the following browsers start predownloading the content (mp3 and ogg)
Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)
I use the basic code to implement the players. Is there a way I can prevent the browsers from predownloading the audio files and only work when they click play?
<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>
<audio controls="controls" preload="none">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Note - preload="none" - can be used with VIDEO HTML5 and AUDIO HTML5.
The preload attribute is supported in all major browsers, except Internet Explorer and Opera.
MSIE still accounts for some 30% of all web traffic, so preload="none" is only a part solution. In a few pages where I had this problem, I add a small script to my page headers:
<script type="text/javascript">
function addAudio(t) {
var l=t.innerHTML.length;
var audioName=t.parentElement.id;
if( t.children.length==0) {
t.innerHTML=t.innerHTML+' <audio controls="controls"><source src="'+
audioName+'.ogg" type="audio/ogg" /><source src="'+
audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
}
}
</script>
and then use DHMTL to dynamically add the audio tag, for example:
<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>
What this does is to define a list item containing a text span. When the person browsing clicks on the spanned text, the javascript fires and appends the <audio> tag. You could alternatively use the onmouseover attribute so that the audio tag is added on hover.
Add the preload attribute to the generated code if you wish. This is the simple approach, but if you are already using jQuery on your webpage, I note that this offers elegant alternatives.
I'm working on embedding video to a web-page and am using mediaelements.js. I used following code from the mediaelements.js examples:
<video width="640" height="360" id="player2" poster="img/echo-hereweare.jpg" controls="controls" preload="none">
<source type="video/mp4" src="somevideo.mp4" />
<source type="video/webm" src="somevideo.webm" />
<source type="video/ogg" src="somevideo.ogv" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flash/flashmediaelement.swf">
<param name="movie" value="flash/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=somevideo.mp4" />
<img src="img/echo-hereweare.jpg" width="640" height="360" alt="Here we are"
title="No video playback capabilities" />
</object>
</video>
Then later on comes the script-code from the example:
<script>
$('audio,video').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
Then I discovered some strange thing in Firefox. When I'm using this code without starting mediaelements.js (not using the script above), firefox tries to play the .mp4, but naturally the console reports an error that the .mp4 format is not supported. So far so right.
In my understanding, the video element should now try the next format – .webm. Instead the flash fallback gets loaded (flashmediaelement.swf) (nothing gets played so far, as the play-button is not clicked yet, but still the .swf is loaded completely).
Then when I play the video the .webm gets downloaded and played – as expected.
When I use it with mediaelements.js an even weirder thing is happening – the .swf not only gets fully loaded once, but is requested at least one more time, without being downloaded (you see it in firebug's network tab – a yellow line with a busy spinner, as if it would load and load. But there is no error or any status code, nor a filesize displayed. It seems kind of like an "stuck" request. I would like to post a screenshot of it, but am not allowed at the moment.).
Additionaly I get the alert in Firebug's console, that the .webm cannot be decoded. The .webm-video starts loading but won't be loaded fully (status code 206). Then no video plays at all, because the .webm is tried to play but stops because of the decoding error. Shoudn't the flash fallback jump in then?
My questions are now:
Is this normal behaviour in Firefox for media elements – that the
fallback flashplayer gets loaded, even though it is not needed?
Why does it load two or three times in the second scenario
allthough it is not used either? I guess this is a bug in mediaelemnts.js
And third, why does firefox play the .webm without mediaelements.js
and doesn't with mediaelements.js? I guess another bug?
Thx for any help.
---NOTE---
I know I am using the .swf that comes with the mediaelements.js as a fallback solution, even when I am not using mediaelements.js. Does anyone know a simple lightweight flash video player? Or would I have to stick with flowplayer as the standard flash video player?
I can't have multiple versions of all my video files (there's lots and the whole site is downloaded) so I wrote this and it seems to work on current Safari, FireFox and Chrome -should work on everything else or add to the non MP4 list
<script type="text/javascript">
/*U might need to add other non-MP4 native browsers*/
if (navigator.userAgent.indexOf('Firefox'||'Chrome') != -1) {
document.write("<object type='application/x-shockwave-flash' data='player.swf' width='480' height='270'>
<param name='movie' value='player.swf' />
<param name='allowFullScreen' value='true'/>
<param name='wmode' value='transparent' />
<param name='flashVars' value='controlbar=over&file=video/sequence03.mp4' />
<span title='No video playback capabilities, please download the video below'>
<a href='video/sequence03.mp4'>Sequence 03</a></span></object>")
}
else {
document.write("<video width='480' height='270' controls><source src='video/sequence03.mp4' type='video/mp4' /></video>")
}
</script>
Hi sorry every one my English is not good! I am using an iframe for a video. Above the iframe there is a dropdown menu, it is working well in firefox but in ie8 dropdown goes to underneath the iframe. If I replace the iframe with an image it is working good. I have play with position and z-index properties a long day but there is no use. Please help me if there any solution for avoiding this issue!!
Assuming your video is being played by Flash....
If you're embedding Flash you should explicitely set the wmode parameter to opaque to avoid dropdowns diving behind the flash object. You could also use a library to deal with the nasty details of embedding flash in different browsers.
EDIT: instead of including an iframe try this - took your movie and used the embedding link youtube presents at the end of the movie:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Embedded YT Movie with DIV element on top</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/zFJfbDETIIk?version=3">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="opaque"> <!-- I added this one wrt youtube's proposed URL -->
<embed src="http://www.youtube.com/v/zFJfbDETIIk?version=3" type="application/x-shockwave-flash"
allowfullscreen="true" allowScriptAccess="always" width="640" height="390"
wmode="opaque" <!-- I added this one wrt youtube's proposed URL -->
>
</object>
<div style="position:absolute;width:300px;height:300px;top:10px;left:10px;background-color: red;">
This one should be on top.
</div>
</body>
</html>