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++;
}
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'd like to be able to change the video source before it starts to play based on a media query using javascript/jquery. The premise being, if the screen resolution is below a certain value then the device is mobile and lets assume it is on a mobile network so load the lower resolution video.
The following works, but I get a 'glitch' as the original video loads before jQuery does it's thing and changes the video source.
I've looked into using the media query built into the html5 video tag but understand that it has limited support.
<style>
#mobile-indicator {
display: none;
}
#media (max-width: 767px) {
#mobile-indicator {
display: block;
}
}
</style>
the html is as follows
<script type="text/javascript">
(function($){
$(window).on("load",function(e){
$('video source').each(function(){
var isMobile = $('#mobile-indicator').is(':visible');
if (isMobile == true){
var videoSrc = ($(this).attr('src'));
var videoSmall = $(this).attr('src').replace('.mp4', '_small.mp4');
$(this).attr('src', videoSmall);
$("video")[0].load();
//console.log(newExt);
}
});
});
})(jQuery);
</script>
<div class="bg_video">
<video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4">
</video>
</div>
<div id="mobile-indicator"></div>
Any ideas how I can do the media query before the video starts to play?
Cheers,
Philip
I've created a codepen that demonstrates the problem
[UPDATE based on VC.One's solution]
<script type="text/javascript">
(function($){
$(window).on("load",function(e){
$('video source').each(function(){
var isMobile = $('#mobile-indicator').is(':visible');
var videoSrc = 'images/backgrounds/<?PHP echo $bg_video; ?>';
if (isMobile == true){
var videoSmall = videoSrc.replace('.mp4', '_small.mp4');
$(this).attr('src', videoSmall);
}else{
$(this).attr('src', videoSrc);
}
$("video")[0].load();
});
});
})(jQuery);
</script>
<div class="bg_video">
<video class="video" <?PHP echo ($bg_image !="") ? 'poster="' . $bg_image . '"' : ''; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="images/backgrounds/null.mp4" type="video/mp4">
</video>
</div>
It seems a simple If/Else statement works. Let me know how it goes.
(1) HTML : Use a dummy URL like null.mp4 so nothing is loaded by video tag at start.
<div class="bg_video">
<video class="video" poster="<?PHP echo $bg_image; ?>" id="bg_video" playsinline autoplay muted loop >
<source src="null.mp4" type="video/mp4">
</video>
</div>
(2) JS : Use an If/Else statement in your JavaScript code.
(function($)
{
$(window).on("load",function(e)
{
$('video source').each(function()
{
var isMobile = $('#mobile-indicator').is(':visible');
if (isMobile == true)
{
alert("is mobile");
var videoSmall = "https://www.w3schools.com/html/mov_bbb.mp4";
$(this).attr('src', videoSmall);
}
else
{
alert("not mobile");
var videoLarge = "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4";
$(this).attr('src', videoLarge);
}
$("video")[0].load();
});
});
})(jQuery);
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 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')
});
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;