I am trying to write a basic video player using html5 video tag. I used Video.js as my JavaScript. I want to play a video with its caption.
Here is the code:
<!DOCTYPE html>
<link href="path/to/video-js.css" rel="stylesheet">
<script src="path/to/video.js"></script>
<script>
videojs.options.flash.swf = "path/to/video-js.swf"
</script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
<source src="m.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
<track src="m.srt" kind="subtitles" srclang="en" label="English" default>
<track src="m.vtt" kind="subtitles" srclang="en" label="English" >
<track src="m.srt" kind="captions" srclang="en" label="English" >
<track src="m.vtt" kind="captions" srclang="en" label="English" >
</video>
When I open this file in my browser, I see a "cc" label that must enable/disable captions; but it doesn't work at all. VLC media palyer can play the video and caption well; so there is no error in source files.
Can any body help me?
Related
I would like to know if it is possible to have a video in mp4 without audio, and tracks in mp3, or is there any way to change the language in an mp4 with several audios?
Something like that.
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
<audio src="/test/audio.mp3" srclang="es" label="Español">
<audio src="/test/audio1.mp3" srclang="en" label="Ingles">
<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
<track src="subtitulos1.vtt" kind="subtitles" srclang="en" label="Ingles">
</video>
This is my code this audio format does not work in mobile please help me how to work audio in mobile browser
<html>
<body>
<audio autoplay loop id="myVideo" width="320" height="176">
<source src="wedding.ogg" type="audio/ogg">
<source src="wedding.mp3" type="audio/mp3">
</audio>
</body>
</html>
<audio id="blast" src="blast.mp3"></audio>
<audio id="smash" src="smash.mp3"></audio>
<audio id="pow" src="pow.mp3"></audio>
<audio id="bang" src="bang.mp3"></audio>
<!-- Background Track -->
<audio id="smooth-jazz" src="smooth-jazz.mp3" autoplay></audio>
Then say you have a gun trigger with a class of blasterTrigger:
Shoot!
You could then use the Javascript API to control the playing of the blast sound when the trigger is clicked like so:
var blasterTrigger = document.querySelector(".blasterTrigger");
blasterTrigger.addEventListener("click", function(){
document.getElementById("blast").play();
});
Source of above code
OR
You can use some HTML5 Audio / Video Library:-
jplayer
mediaelementjs etc.
How to enable default close caption for HTML5 Video
I tried this
<video id="video" src="abc.mp4">
<track src="web.vtt" srclang="en" label="English" kind="subtitles" default=""></track>
</video>
You need to use a <source> element or the inner of your <video> element will be ignored :
<video controls>
<source type="video/mp4" src="http://vjs.zencdn.net/v/oceans.mp4" />
<track src="http://www.videojs.com/vtt/captions.vtt" srclang="en" label="English" kind="subtitles" default=""></track>
</video>
Video and captions taken from video.js
I try add subttitle in video html5 with videosub.js
http://www.storiesinflight.com/js_videosub/
It work with file in same folder but not work with url stream !
Subttitle not word with this code
<video id="my_video" width="100%" height="100%" autoplay="" >
<source src="https://xmovies8.org/get_video?token=Xe-QdFvRw5e-6BEHzLTDguxNlJ5CW-mqdGyvtmNZ4GBGWVuHFrzPSoDtYJcG2z8XeIMOJ3GB7m7mz0m7-kVD6Abo5WJhrTsgUXlS2kQhRs-2-NCc9lzsPT6iNiKElzmAvPs5tlC6CQHrL9GgtTVSZ-46OELzd6rfI5pCbQOoZzEC6DTMSXpToY3MFAOzIsqadILaa3SYAwFSmjzirfTWtRXVcum7dpwbfY-IB6eV7oBzffJKJXUqeNi77NIejTky1IAH1bA3eByjWmE8ob4Odsfz8Otmkp4cAT1K9CVv-XgKVCZkMruxVO5-3ZoGQQ2hS8jDK-cdXCre4Vtux-JC9ymHxHCzue_95gPGdZTvPusUYCFUEngdfQZqssU82vK_8SdjgASmKx1EhUpgOrXMgLHidi1YC0hfZU58MZssFLt8l_pRkQAJU40pBJZYPtY_ii58sA5tDsDTS_inspRH7A" type="video/mp4" />
<track label="English" kind="subtitles" srclang="en" src="http://phim.dinhvanvu.com/wp-content/uploads/2015/07/Demo.srt" default></track>
</video>
But it work with
<video id="my_video" width="100%" height="100%" autoplay="" >
<source src="https://xmovies8.org/get_video?token=Xe-QdFvRw5e-6BEHzLTDguxNlJ5CW-mqdGyvtmNZ4GBGWVuHFrzPSoDtYJcG2z8XeIMOJ3GB7m7mz0m7-kVD6Abo5WJhrTsgUXlS2kQhRs-2-NCc9lzsPT6iNiKElzmAvPs5tlC6CQHrL9GgtTVSZ-46OELzd6rfI5pCbQOoZzEC6DTMSXpToY3MFAOzIsqadILaa3SYAwFSmjzirfTWtRXVcum7dpwbfY-IB6eV7oBzffJKJXUqeNi77NIejTky1IAH1bA3eByjWmE8ob4Odsfz8Otmkp4cAT1K9CVv-XgKVCZkMruxVO5-3ZoGQQ2hS8jDK-cdXCre4Vtux-JC9ymHxHCzue_95gPGdZTvPusUYCFUEngdfQZqssU82vK_8SdjgASmKx1EhUpgOrXMgLHidi1YC0hfZU58MZssFLt8l_pRkQAJU40pBJZYPtY_ii58sA5tDsDTS_inspRH7A" type="video/mp4" />
<track label="English" kind="subtitles" srclang="en" src="sub/je2.srt" default></track>
</video>
<video id="my_video" height="100%" width="100%" crossorigin="anonymous"></video>
This is because CORS limitation.
Use crossorigin="anonymous" in video tag.
if the above code didn't work, then there is no way to load the subtitle from that server.
Hope it will works for you. :)
2I need some help, I'm using several videojs html players on slick slider sycing carousel. My problem is when I click on other carousel thumbnail to go to the other video the first video keeps playing. I'd like to pause any video on click any thumbnail.
My html is:
<div class="slider-for">
<div class="video-wrap">
<video id="example_video_1" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video2.png"
data-setup='{}'>
<source src="images/video/Kalima2.mp4" type='video/mp4' />
<source src="images/video/Kalima2.webm" type='video/webm' />
<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>
</div>
<div class="video-wrap">
<video id="example_video_2" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video1.jpg"
data-setup='{}'>
<source src="images/video/Kalima1.mp4" type='video/mp4' />
<source src="images/video/Kalima1.webm" type='video/webm' />
<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>
</div>
<div class="video-wrap">
<video id="example_video_3" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video-students.jpg"
data-setup='{}'>
<source src="images/video/Students.mp4" type='video/mp4' />
<source src="images/video/Students.webm" type='video/webm' />
<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>
</div>
<div class="video-wrap">
<video id="example_video_4" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video3.jpg"
data-setup='{}'>
<source src="images/video/Kalima3.mp4" type='video/mp4' />
<source src="images/video/Kalima3.webm" type='video/webm' />
<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>
</div>
<div class="video-wrap">
<video id="example_video_5" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video-students2.jpg"
data-setup='{}'>
<source src="images/video/Students2.mp4" type='video/mp4' />
<source src="images/video/Students2.webm" type='video/webm' />
<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>
</div>
</div>
<div class="video-thumb">
<div><div id="thumb"><img src="images/video/video2.png"></div></div>
<div><div id="thumb"><img src="images/video/video1.png"></div></div>
<div><div id="thumb"><img src="images/video/video3.png"></div></div>
<div><div id="thumb"><img src="images/video/video4.png"></div></div>
<div><div id="thumb"><img src="images/video/video5.png"></div></div>
</div>
I find this js:
_V_("example_video_1").ready(function(){
var player = this;
var pausebutton = document.getElementById("thumb");
pausebutton.onclick = function(event) {
player.pause();
};
});
With this function I can pause only the first video, I'd like some help for a function when I click on single thumbnail I could pause any playing video and it should to work for all thumbnails too. Someone could help me?
The main issue you are having is that you have several video tags with the same ID: "example_video_1".
I suggest giving each video tag their own ID. Then you'll be able to access them individually.