I have a page that contains a video and a button, but i don't want the user to be able to click finish until the video ends.
Code for the video:
<video width="100%" height="480" controls>
<source src="video/lesson4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Code for the finish button:
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="btn" name="register_btn" disabled="disabled"><h6>FINISH</h6></button>
</div>
</form>
you should listen to "ended" event, like so:
var video = document.getElementById("myVideo");
var button = document.getElementById("myButton")
video.addEventListener("ended", function() {
button.disabled = false;
}, true);
See media events here
You can do this:
JavaScript
var element = document.getElementById('video_id');
element.onended = function() {
document.getElementById('btn').disabled = false;
};
jQuery
$("video").on("ended", function (e) {
$('#btn').prop('disabled', false);
});
Same you can use for events play and pause.
For more events you can refer this: https://www.w3.org/2010/05/video/mediaevents.html
You can add an event listener
Like this:
<video width="100%" height="480" controls>
<source src="video/lesson4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="btn" name="register_btn" class=“enableIfFinish”
disabled="disabled"><h6>FINISH</h6></button>
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$(‘.enableIfFinished’).prop(‘disabled’,false);
}
</script>
Do not forget to include jquery library
Following is working example
document.getElementById('someID').addEventListener('ended',videoEndHandler,false);
function videoEndHandler(e) {
document.getElementById("myBtn").disabled = false;
}
<video id="someID" width="100%" height="480" controls>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="myBtn" name="register_btn" disabled="disabled"><h6>FINISH</h6></button>
</div>
</form>
Related
I am displaying a video on my website like this:
<video>
<source src={link} type="video/mp4" />
</video>
And I would like to extract duration of the video from the provided src link, to display it somewhere else on the page. Assume we have the link stored as a string, how will I extract the duration of the video?
Sample src link: https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d
to get the duration of the video you have to wait for it to load using the event listener and that way you are sure you have the data, this is a link you can use to help you learn more about the API, here.
let video = document.getElementById("video")
video.addEventListener('loadeddata', function() {
console.log("test", video.duration)
// Video is loaded and can be played
}, false);
function myFunction() {
alert(video.duration);
}
myFunction
<html>
<h1>video duration</h1>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="video">
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4" />
</video></html>
The video tag has a "duration" property, which will tell you the length of a video.
https://www.w3schools.com/tags/av_prop_duration.asp
<html>
<body>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="https://firebasestorage.googleapis.com/v0/b/qriositynet-dev.appspot.com/o/chat%2FMgttfKqKIDhQ6bgtgy6V%2Fvideos%2F1663229371400watermelon-bunny.mp4?alt=media&token=722bb260-c65b-46fe-8805-4a5a742f282d" type="video/mp4">
</video>
<script>
function myFunction() {
let vid = document.getElementById("myVideo");
alert(vid.duration);
}
</script>
</body>
</html>
I'm only trying to add a mute/unmute button, I followed a couple of tutorials, wrote the same code but it doesn't seem to be working.
Also, if any one of you feels particularly generous today, could you please show me how to make a single button that mutes, and when clicked again, unmutes the video sound?
<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteVideo()" type="button">Mute sound</button>
<button onclick="unmuteVideo()" type="button">Enable sound</button>
</div>
</div>
<script>
var my=document.getElementById("vid");
function playVideo(){
my.play();
}
function muteVideo(){
my.muted = true;
}
function unmuteVideo(){
my.muted = false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
</div>
</div>
<script>
var my=document.getElementById("vid");
function playVideo(){
my.play();
}
function muteUnmuteVideo(){
my.muted = !my.muted;
}
</script>
</body>
</html>
This Code Works fine
<!DOCTYPE html>
<html>
<body>
<div>
<video id="vid" width="400" controls>
<source src="../../Downloads/Bohemian Rhapsody _ Muppet Music Video _ The Muppets_360p.mp4"
type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<div class="controller">
<button onclick="muteVideo()" type="button">Mute sound</button>
<button onclick="unmuteVideo()" type="button">Enable sound</button>
</div>
</div>
<script>
let my = document.getElementById("vid");
const playVideo = () => {
my.play();
}
function muteVideo() {
console.log("hello");
my.muted = true;
}
function unmuteVideo() {
my.muted = false;
}
</script>
</body>
</html>
I need a Mute/Unmute button and an tag that can only mute the sound of a video when clicked.
The mute/unmute button works fine, but the <a tag doesn't do anything
<!DOCTYPE html>
<html>
<body>
<div>
<video src="video.mp4" id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
Stop Sound
</div>
</div>
<script>
var my = document.getElementById("vid");
const playVideo=() => {
my.play();
}
function muteUnmuteVideo(){
my.muted = !my.muted;
}
let exitvid = document.getElementById("vid");
function stopSound(){
exitvid.muted = false;
}
</script>
</body>
</html>
Why are you using the js code
try to use built in video tag you can get the controllers by default
<video controls muted width="80%" height="50%">
<source src="https://assets.mixkit.co/videos/preview/mixkit-stars-in-space-1610-large.mp4/" type="video/mp4">
</video>
I'm trying to build a page that displays only one video and when we press a button the video is changed to another, but thay all need to stay in sync, because video1 has audio and the other ones needs to be synced to make sense.
Here's what I got, i'm really a noob so sorry for the giant code:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
var vid1 = document.getElementById("video1");
var vid2 = document.getElementById("video2");
var vid3 = document.getElementById("video3");
var vid4 = document.getElementById("video4");
var vid5 = document.getElementById("video5");
var vid6 = document.getElementById("video6");
if(
$(".button1").click(function(){
$(".video1").show();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button2").click(function(){
$(".video1").hide();
$(".video2").show();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button3").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").show();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button4").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").show();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button5").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").show();
$(".video6").hide();
}
));
if(
$(".button6").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").show();
}
));
});
</script>
</head>
<body>
<div class="video1">
<video id="video1" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely1.mp4" type="video/mp4">
</video>
</div>
<div class="video2">
<video id="video2" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely2.mp4" type="video/mp4">
</video>
</div>
<div class="video3">
<video id="video3" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely3.mp4" type="video/mp4">
</video>
</div>
<div class="video4">
<video id="video4" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely4.mp4" type="video/mp4">
</video>
</div>
<div class="video5">
<video id="video5" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely5.mp4" type="video/mp4">
</video>
</div>
<div class="video6">
<video id="video6" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely6.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="button1">
<button>Camera 1</button>
</div>
<div class="button2">
<button>Camera 2</button>
</div>
<div class="button3">
<button>Camera 3</button>
</div>
<div class="button4">
<button>Camera 4</button>
</div>
<div class="button5">
<button>Camera 5</button>
</div>
<div class="button6">
<button>Camera 6</button>
</div>
</div>
</body>
</html>
I've hacked together a working fiddle prototype; definitely not the most efficient it could be, but it works.
http://jsfiddle.net/3BmDx/
Basically, the way that it works is that the javascript will handle the clicks and will play all of the videos instead of using the 'autoplay' tag. You may want to look into pre-loading the videos before running that .play() for them. Something like:
var videos = 6;
var loaded = 0;
$(video).on("load", function() {
loaded++;
if(loaded==videos) {
// all videos have been loaded on the page, now .play() them
}
}
jQuery is handy because if you want to apply a .hide() to all of the video elements on the page at once, you can simply use $('video').hide() and jQuery will match all video tags.
I use this to my advantage in the reset(b) function. the reset(b) function is called each time a button click is pressed and it will re-enable all buttons, deactivate the current button (helpful for knowing which you selected) and then hide all the videos on the page. Afterward the correct video will be shown.
$(document).ready(function(){
// hide all of the video tags
$("video").hide();
$("button").removeAttr("disabled");
$.each($("video"), function(i,e) {
$(e)[0].play();
});
function reset(b) {
$("button").removeAttr("disabled");
$(b).attr("disabled", "disabled");
$("video").hide();
}
// handle button click for video to show
$("#button1").click(function() {
reset($(this));
$("#video1").show();
});
$("#button2").click(function() {
reset($(this));
$("#video2").show();
});
$("#button3").click(function() {
reset($(this));
$("#video3").show();
});
$("#button4").click(function() {
reset($(this));
$("#video4").show();
});
$("#button5").click(function() {
reset($(this));
$("#video5").show();
});
$("#button6").click(function() {
reset($(this));
$("#video6").show();
});
});
You can use the synchronisation code I used. The essential part is
if (Math.abs(other.currentTime - first.currentTime) > maxDrift) {
// sync all times of videos to first
other.currentTime = first.currentTime;
}
Although this approach works for some cases there are some issues. Browsers synchronise on keyframes, which you have to make sure are in the video. Also lower frame rates (fps<10) tend to be very buggy.
I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons. if someone can help with this matter its highly appropriated.
Here is the HTML code
<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>
JavaScript Code
function playMymovie() {
var element = document.getElementById('myMovie');
var element = document.getElementById('pbutton');
playButton.addEventListener('click', PlayOrPause, false);
volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
if(!myMovie.paused && !myMovie.ended) {
myMovie.pause();
}else{
myMovie.play()
}
}
function VolMute(){
if(!myMovie.muted){
myMovie.muted(true);
}else{
myMovie.muted(false);
}
}
Thanks in advance.
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnMute()">Mute/UnMute</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function muteUnMute()
{
if( !myVideo.muted)
myVideo.muted='muted';
else
myVideo.muted=false;
}
</script>
</body>
</html>
Try this:
var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;