I have multiple videos on a page.
<div class="row text-center">
<video width="320" height="240" controls class="myvideo">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="row text-center">
<video width="320" height="240" controls class="myvideo">
<source src="http://www.html5videoplayer.net/videos/fantasy.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
I want to add buffering events to them. Also, when I click video 1, video 2 (if playing) should automatically stop. How can I achieve this? They have a common class. Shall I have to implement ids with them?
give Ids to your videos:
<video width="320" height="240" controls class="myvideo" id="myVideoOne">
<video width="320" height="240" controls class="myvideo" id="myVideoTwo">
for buffering :
var vid = document.getElementById("myVideoOne");
alert("Start: " + vid.buffered.start(0)
+ " End: " + vid.buffered.end(0));
var vid = document.getElementById("myVideoTwo");
alert("Start: " + vid.buffered.start(0)
+ " End: " + vid.buffered.end(0));
for stoping automatically you can use this inside your videoPlay1 and videoPlay2 functions:
function videoPlay1() {
var video1 = document.getElementById("myVideoOne");
var video2 = document.getElementById("myVideotwo");
if (video1.paused) {
video1.play();
video2.pause();
} else {
video1.pause();
video2.pause();
}
}
function videoPlay2() {
var video1 = document.getElementById("myVideoOne");
var video2 = document.getElementById("myVideotwo");
if (video2.paused) {
video2.play();
video1.pause();
} else {
video1.pause();
video2.pause();
}
}
example : to set a loader for myVideoOne you can use this jquery:
css:
video.loading {
background: black url(/yourGifImg.gif) center center no-repeat;
}
jquery:
$('#myVideoOne').on('loadstart', function (event) {
$(this).addClass('loading')
});
$('#myVideoOne').on('canplay', function (event) {
$(this).removeClass('loading')
});
Related
How can I play videos separately by clicking on their own button?
Codes Sample:
<video class="video-file" id="myVideoPlayer_1">
<source src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-
and-audio-content/rabbit320.mp4" type="video/mp4">
</video>
<button class="play-btn" id="play_button_1"></button>
<video class="video-file" id="myVideoPlayer_2">
<source src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-
and-audio-content/rabbit320.mp4" type="video/mp4">
</video>
<button class="play-btn" id="play_button_2"></button>
<video class="video-file" id="myVideoPlayer_3">
<source src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-
and-audio-content/rabbit320.mp4" type="video/mp4">
</video>
<button class="play-btn" id="play_button_3"></button>
I tried to do this but it didn't work
My JS codes:
var vid_elements = document.getElementsByClassName("video-file");
var vid_btn = document.getElementsByClassName("play-btn");
for (var i=0; i<vid_elements.length; i++) {
var currentVideo = vid_elements[i].id;
var currentBtn = vid_btn[i].id;
var viddd = document.getElementById(currentVideo);
var btnnn = document.getElementById(currentBtn);
btnnn.addEventListener("click", function () {
if (viddd.paused == true) {
viddd.play();
playHighlight.style.display="none";
} else {
viddd.pause();
playHighlight.style.display="block";
}
})
}
Thank you very much for your time
I have 2 videos as a background / z-index = 1.
2 columns divided the screen in 50/50 ratio z-index = 3. if mouse is hovering over first column, then first video is playing in background, when mouse is hovering in second column, first video is hidden and second video is playing in background.
It is working in CHROME browser, but it is not working in safari-doesnt play video nor sound.
Can you show me how to fix it please?
const boxes = document.querySelectorAll('.boxes')
const video1 = document.querySelector('.video1')
const video2 = document.querySelector('.video2')
boxes.forEach(box => {
box.addEventListener('mouseover', (e) => {
e.preventDefault()
const a = e.currentTarget.dataset.set
console.log(a)
if (a === '1') {
var promise1 = video1.play();
if (promise1 !== undefined) {
promise1.catch(error => {
console.log(error);
}).then(() => {
video1.classList.remove('hiddn')
video2.classList.add('hiddn')
video2.pause()
})
}
} else if (a === '2') {
var promise2 = video2.play();
if (promise2 !== undefined) {
promise2.catch(error => {
console.log(error);
}).then(() => {
video1.classList.add('hiddn')
video1.pause()
video2.classList.remove('hiddn')
})
}
}
})
})
<video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true"></video>
<video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true"></video>
It only works when including playsinline.
<video src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" autoplay="true" loop muted playsinline ></video>
<video src="video2.mp4" data-id="2" width="100%" class="hiddn video2" type="video/mp4" autoplay="true" loop muted playsinline></video>
Second solution :
if the first solution doesn't work, you may need to set the controls="true" flag.
<video loop autoplay controls="true" src="video1.mp4" width="100%" data-id="1" class="video1" type="video/mp4" ></video>
FYI: if you run it on apple device e.g. Ipad/Iphone and then turn off the low power mode it may works.
I'm trying to start and stop two videos with two separate buttons. I've simply copied the code and renamed the variables, yet one piece of code works and one doesn't. I get the error 'TypeError: video2.pause is not a function at HTMLButtonElement.c'. Both videos and buttons are placed in modals respectively. Why am I getting this weird error, especially when exactly the same code works?
Javascript:
var video = document.getElementById("video.mp4");
var playButton = document.getElementById("play-pause");
var video2 = document.getElementById("video2.mp4");
var play = document.getElementById("play-pause2");
playButton.addEventListener("click", function a () {
if (video.paused == true) {
video.play();
playButton.innerHTML = "Pause";
} else {
video.pause();
playButton.innerHTML = "Play";
}
});
play.addEventListener("click", function c () {
if (video2.paused == true) {
video2.play();
play.innerHTML = "Pause";
} else {
video2.pause();
play.innerHTML = "Play";
}
});
HTML:
<video width="900px" height="600px" id="Digital_Poster.mp4" />
<source src="assets/video.mp4" type="video/mp4" id="video.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px">
<source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
You should call .pause on the <video> elements, but the id is set on the <source> ones. Moving it to the <video> tags should make it work:
<video width="900px" height="600px" id="video.mp4">
<source src="assets/video.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px" id="video2.mp4">
<source src="assets/video2.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
By the way, I've corrected the /> to > in the first line. Also, declaring two elements with ID set to video-controls is illegal, consider using HTML classes (thanks #zer00ne for pointing out).
I ran into a little problem right now and i can't find a solution.
HTML:
<video id="vid" controls >
<source src=".mp4" type="video/mp4">
<source src="HEYE.mp4" type="video/mp4">
</video>
JavaScript:
function ChangeVideo(){
if(click%2 == 0){
document.getElementById('vid').src="Troll.mp4";
click++;
}else{
document.getElementById('vid').src="HEYE.mp4";
click++;
}
}
Button:
<button onclick="ChangeVideo()">Change video</button>
the problem is that i dont get it to change video when i click the button.
My to videos in my map is named "HEYE.mp4" and "Troll.mp4"
function ChangeVideo(){
var vid = document.getElementById('vid');
vid.src = click%2 ? "HEYE.mp4" : "Troll.mp4";
vid.load();
vid.play();
click++;
}
I have a video in popup. When use below code on popup close, the video doesn't stop buffering and have the old video reference when reopen it. Here is the code:
HTML:
<div id="w_oPopup">
<div id="w_oPlayer">
<video id="w_oVideoFrame" autoplay loop controls tabindex="0" width="946" height="532" poster="">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
</div>
JS:
$('.w_cExitPopupButton').bind('click', onPopupBlockerClick);
function onPopupBlockerClick(e) {
$('#w_oPopupBlocker').hide();
//Here my tries...
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = "";
}
Try using the pause() method to stop the audio and set the audio path again and play. There is no stop() method to stop the video.
function stop_audio(){
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = " ";
}
function play_audio(){
$('#w_oVideoFrame')[0].src = "path of audio";
$('#w_oVideoFrame')[0].play();
}
use the currentTime on the selected video element
video.currentTime = 0;