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.
Related
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 have HTML5 player in form and use JS to step forward and step back in multi-level form. But, when user click any button (back, reset, etc.) the video is still playing. How to make auto-stop video when fieldset changes?
For example: Do you have a fever -> yes (here is video) -> reset -> video still playing in background.
JSFiddle
> <video id="video" width="960" height="600" controls="controls"
> autoplay="autoplay">
> <source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
> </video>
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $('#firstField');
Working example with a snipplet:
$(".pause").click(function(){
$('#video')[0].pause();
});
$(".play").click(function(){
$('#video')[0].play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="pause">Pause/Stop</button>
<button class="play">Play</button>
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay">
<source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
</video>
Try to add :
var vid = $("#video");
function pauseVid() {
vid.pause();
}
$(".resetButton").click(function(){
pauseVid();
}
I am making a webpage that has two videos on it. I want each video to play when its poster image is clicked on. To do this, I added the script below to each video, and changed the id for each to "video1" and "video2".For some reason both videos play and stop the second video. I can't see why. Below is my code:
HTML
<div class="fade">
<button onclick="playPause()">
<video id="video1" width="350px" height="250" poster="images/video-
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause()">
<video id="video2" width="350px" height="250" poster="images/video-
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
SCRIPTS
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<script>
var myVideo=document.getElementById("video2");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>`
NEW CODE
<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250"
poster="images/video-poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4"
type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250"
poster="images/video-poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4"
type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
</div>
<script>
function playPause(video)
var myVideo=document.getElementById("video");
{
if (myVideo.paused)
myVideo.play();
}else
myVideo.pause();
}
}
</script>
You're having issues because you are using the same variable to refer to the video in both cases. You repeated yourself a little bit in your code, so I tried to cut out those bits. Let me know if you have any issues.
<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250" poster="images/video-
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>
<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250" poster="images/video-
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"
type="video/webm">
Your browser does not support this video.
</video>
</div>
<script>
function playPause(video)
{
var myVideo=document.getElementById(video);
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
// you could consolidate the above if/else to be:
// myVideo.paused ? myVideo.play() : myVideo.pause();
}
</script>
Your problem comes from the fact that you use the same names for everything:
<script>
var myVideo=document.getElementById("video1"); // Creates variable myVideo
function playPause() // Creates a function called playPause
{
// Plays or pauses "myVideo"
}
</script>
<script>
var myVideo=document.getElementById("video2"); // Overrides the value of "myVideo" to point to video2 instead
function playPause()
{
// Plays or pauses "myVideo"
}
</script>
So when you actually call playPause, myVideo has always been set to point to video2.
I suggest that you pass the ID of the video you want to play or pause when you call playPause, and that you only define playPause once - that second definition is totally redundant, since it's the exact same code.
function playPause(videoId) {
var myVideo=document.getElementById(videoId);
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
Then your buttons can be rewritten to be
<button onclick="playPause('video1')">
<button onclick="playPause('video2')">
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;
I have a problem, I am implimenting JavaScript into my website to show the audio controls when the button is clicked. I have the controls hidden with CSS and I need JavaScript to show the controls when my button is clicked. Here is my code.
<video id="videoBackground" poster="img/loading.gif" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
<source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">
</video>
<audio id="audioInterview" preload='auto' controls>
<source src="audio/interview.mp3" type="audio/mpeg">
</audio>
<div class="buttonSkip" onclick="window.location='http://www.lrltv.org/muslims-nuclear.html'"></div>
<div id="buttonPlacement" class="buttonPlacement">
<div onclick="showAudio('audioInterview')"; class="btnDonate"></div>
<div onclick="alert('Clicked Buy');" class="btnBuy"></div>
</div>
<!-- Show Audio when button is clicked -->
<script>
function showAudio('audioInterview')
{
var obj=document.getElementById('audioInterview');
obj.className = 'show';
}
</script>
function showAudio('audioInterview')
{
var obj=document.getElementById('audioInterview');
obj.className = 'show';
}
is wrong, it should be
function showAudio(controlId)
{
var obj=document.getElementById(controlId);
obj.className = 'show';
}