Turning off closed caption on HTML5 video by default - html

Here's what I have...
<video id="video" controls="controls" preload="metadata" poster="/video/promotional/transparent.png">
<source src="/video/promotional/promotional.mp4" type="video/mp4" />
<source src="/video/promotional/promotional.webm" type="video/webm" />
<source src="/video/promotional/promotional.ogv" type="video/ogg" />
<track src="/video/promotional/promotional.vtt" label="English Captions" kind="subtitles" srclang="en-us" />
</video>
<script type="text/javascript">
$(document).ready(function() {
var video = document.querySelector('#video');
var.track = video.textTracks[0];
track.mode = 'hidden';
});
</script>
I was hoping this would turn off closed caption by default, but it doesn't seem to be the case. Any ideas?

your answer was very close (I assume var.track = was a typo - fixing that works in Chrome and Safari on OSX and IE on PC for me). For re-use I like to split the textTracks out into a variable, but that's personal preference:
<script type="text/javascript">
$(document).ready(function() {
var video = document.querySelector('#video'); // get the video element
var tracks = video.textTracks; // one for each track element
var track = tracks[0]; // corresponds to the first track element
track.mode = 'hidden';
});

Related

Added hidden element, but now my hover effect doesn't work anymore

I have a problem with my javascript code, I made a hover effect for a text to play a video. but now I want to hide the video when you not hover the text. when I'm adding a hidden element, the hover effect does not work anymore...
Do you guys know the solution?
<script type="text/javascript">
var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");
function PauseH(){
Hvideo.pause();
}
function PlayH(){
if(Hvideo.paused)
Hvideo.play();
}
if(Hvideo.pause){
Hvideo.hidden = true;
}else{
Hvideo.hidden = false;
}
</script>
<div>
<video id="Hvideo" width="320" height="240" preload="auto">
<source src="URL will be added" type="video/mp4">
</video>
<button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>
</div>
your code appears to be essentially working:
https://www.w3schools.com/code/tryit.asp?filename=GMLBBYWJV4I2
<div>
<button id="Htext" onmouseover="PlayH()" onmouseout="PauseH()">HVAC</button>
</div>
<video id="Hvideo" width="320" height="240" controls>
<source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var Htext=document.getElementById("Htext");
var Hvideo=document.getElementById("Hvideo");
function PauseH(){
Hvideo.pause();
Hvideo.hidden = true;
}
function PlayH(){
if(Hvideo.paused) {
Hvideo.play();
Hvideo.hidden = false;
}
}
</script>
I do wonder if the issue is down to the fact that you need the HTML elements to exist before you run your JavaScript, and it will fail if the JavaScript runs before the elements appear on the page.

how to get html5 video total duration displayed without playing the video

I do found something online that is just about to be similar to what am trying to achieve, but here are a few problems i encountered. (1) i want the time be in minutes and seconds format. (2) the code only works for a single video in my html file. how can i make the code work for multiple videos in my file all showing their different durations. below is the code
<script> var myVideoPlayer = document.getElementById('video_player'), meta = document.getElementById('meta'); myVideoPlayer.addEventListener('loadedmetadata', function () { var duration = myVideoPlayer.duration; meta.innerHTML = "Duration is " + duration.toFixed(2) + " seconds." }); </script>
<video id="video_player" width="320" height="240" controls poster="something/something.jpg"> <source src="someVideo.mp4" type="video/mp4"> </video>
<div id="meta"></div>
This is what I want to achieve using codeigniter
Like this:
<video width="320" height="240" id = "myVideo" controls>
<source src="someVideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
var e = document.getElementById("myVideo");
var cancelAlert = false;
var run = function() {
if (e.readyState === 4 && !cancelAlert) {//readyState 4 means it is loaded fully
cancelAlert = true;//This is so that it only alerts once. No spam pls.
alert(e.duration);
}
requestAnimationFrame(run);//This is so that it runs every frame.
};
run();//run the function
</script>
You may need to do some tweaking, and there is probably a more efficient way to do this, but this is what I do.

audio element loops before the end

Whever I set
s.loop = true
or with onended event :
s.onended = function()
{
this.currentTime = 0 ;
this.play();
};
it loops a few seconds before the end of the track....
Did anybody here experienced this problem before and found how to fix it ?
(Yes I know webaudio is way better, but it takes ages to decode files on mobiles, so I use it only for short sounds and have to use the nasty old audio element for music.)
If you want to always repeat the audio, and it does not work through Javascript, you can use loop tag in HTML
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
I test your code and play complete sound, then repeat the sound
<audio id="Audio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<script>
var s = document.getElementById("Audio");
s.loop = true;
</script>
<script>
var s = document.getElementById("Audio");
s.onended = function(){
this.currentTime = 0 ;
this.play();
}
</script>

HTML meta http-equiv refresh to url after video ends [duplicate]

How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>

PLaying two videos in sequence in Chrome by using the <video> tag

How do I play two videos in a sequence in the HTML5 video tag?
In Google Chrome, the following code plays only the first intro video.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
var i = 0;
var sources = ['1.mp4', '2.mp4'];
videoElement.addEventListener('ended', function(){
videoElement.src = sources[(++i)%sources.length];
videoElement.load();
videoElement.play();
}, true);
</script>
</head>
<body>
<video id="videoElement" width="640" height="360" autoplay="autoplay">
<source src="intro.mp4" type="video/mp4"></source>
</video>
<body>
<html>
Browser should fire error 'videoElement is not defined' with your JavaScript code, you must get video element from DOM instead of using its id directly. Please change your code to
$(document).ready(function() {
//place code inside jQuery ready event handler
//to ensure videoElement is available
var i = 0;
var sources = ['1.mp4', '2.mp4'];
$('#videoElement').bind('ended', function() {
//'this' is the DOM video element
this.src = sources[i++ % sources.length];
this.load();
this.play();
});
});
In case someone came across this question again, here is my solution to similar problem-I needed to play first video once and then second video in a loop. I also have support for .webm, .m4v and .mp4.
This is my JS:
$(document).ready(function(){
var vid = document.getElementById("landing-video");
vid.onplay = function() {
var source=vid.currentSrc;
folder = source.match(/(.+)(\/)/);
ext = source.match(/(\.\w+)$/);
};
vid.onended = function() {
$("#landing-video").attr({
"src":folder[0]+"video-2"+ext[0],
"loop":""
});
};
});
And this is my HTML:
<video autoplay="" muted="" poster="" id="landing-video">
<source src="my-folder/video-1.webm" type="video/webm">
<source src="my-folder/video-1.m4v" type="video/x-m4v">
<source src="my-folder/video-1.mp4" type="video/mp4">
</video>
This might save someone some time.