Develop Reference

How to make a video play when you open a modal box using JavaScript?

I've been setting up a video page for my website and I'm trying to make it extra slick by using Javascript!... Unfortunately, I completely suck at Javascript! Ok, so here's my problem:
I've managed to make a modal box with an opening animation using HTML and CSS, now what I want to happen is as soon as I click the video thumbnails the video starts playing and when I click the close button, the video stops playing or pauses, I've managed to make it work using "onclick" commands... but it only works for one video!
I've tried setting up videos with multiple ids and multiple JS vars but none of them work, at some point I made it so all of the videos started playing at once even though I only had one modal box open... lol
Here's a snipet of my current code:
<!-- Open the Lightbox with these images -->
<div class="row">
<div class="column">
<img src="tsr/teaserthumbnail.png" onclick="openModal();currentSlide(1);playVid()" class="hover-shadow">
<img class="play-btn" src="/assets/play-btn.png" onclick="openModal();currentSlide(1);playVid()">
</div>
<div class="column">
<img src="tsr/e3thumbnail.png" onclick="openModal();currentSlide(2);playVid()" class="hover-shadow">
<img class="play-btn" src="/assets/play-btn.png" onclick="openModal();currentSlide(2);playVid()">
</div>
</div>
<!-- Modal/Lightbox Content -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal();pauseVid()">×</span>
<div class="modal-content">
<div class="mySlides">
<center><video id="myVideo" width="100%" controls src="tsr/TSR_TeaserMovie_PEGI_ENG_1527074582.mp4"></video></center>
</div>
<div class="mySlides">
<center><video id="myVideo" width="100%" controls src="tsr/TSR_E3_Trailer_UK_PEGI_1528474075.mp4"></video></center>
</div>
<script>
// Open the Modal
var vid = document.getElementById("myVideo");
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function playVid() {
vid.play();
}
// Close the Modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
function pauseVid() {
vid.pause();
}
Here's the webpage itself if you need anymore context:
https://sonic.retro-media.net/videos/tsr.php
All I really need is for each video to start playing when I click the thumbnail or pause when I close the modal/lightbox.
Thanks in advance!

Can you just call playVid() from the openModal() when that function is running?
One solution you can try is to set autoplay=1 when the modal is opened too, that way the video starts playing. You can do the same to stop the video when 'closeModal()' is called by setting autoplay=0.
This is how you would add the autoplay to the current src of the video if it's in an iframe:
vid.src = vid.src + (vid.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';
Here is a more complete version of the code.
var autoplayVideo = function (modal) {
// Look for a YouTube, Vimeo, or HTML5 video in the modal
var video = modal.querySelector('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');
// Bail if the modal doesn't have a video
if (!video) return;
// If an HTML5 video, play it
if (video.tagName.toLowerCase() === 'video') {
video.play();
return;
}
// Add autoplay to video src
// video.src: the current video `src` attribute
// (video.src.indexOf('?') < 0 ? '?' : '&'): if the video.src already has query string parameters, add an "&". Otherwise, add a "?".
// 'autoplay=1': add the autoplay parameter
video.src = video.src + (video.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';
};
Now to stop the video when the modal closes:
/**
* Stop a YouTube, Vimeo, or HTML5 video
* #param {Node} modal The modal to search inside
*/
var stopVideo = function (modal) {
// Look for a YouTube, Vimeo, or HTML5 video in the modal
var video = modal.querySelector('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');
// Bail if the modal doesn't have a video
if (!video) return;
// If an HTML5 video, pause it
if (video.tagName.toLowerCase() === 'video') {
video.pause();
return;
}
// Remove autoplay from video src
video.src = video.src.replace('&autoplay=1', '').replace('?autoplay=1', '');
};
Don't forget to expose the button/thumbnail and the modal as arguments
modals.init({
callbackOpen: function ( toggle, modal ) {
autoplayVideo(modal);
},
callbackClose: function ( toggle, modal ) {
stopVideo(modal);
}
});
Let me know if this works!
Cheers!

I figured it out!
The solution was rather simple too, all I had to do to was edit the code to:
<script>
function playVid(vidID) {
var vid = document.getElementById(vidID);
vid.play();
}
function pauseVid(vidID) {
var vid = document.getElementById(vidID);
vid.pause();
}
</script>
Now all I had to do was change my video IDs accordingly, in this case 'myVideo1' and 'myVideo2'!
Thank you for your help!

Firefox - https://support.mozilla.org/en-US/kb/block-autoplay
Chrome - https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
autoplay is going to be turned off (more like, it's already off) by default on all major browsers, unless the user changes the browser autoplay settings.

HTML5 video custom controls: How to show the current frame of the video while dragging the seekbar

I have custom controls for a video.
See codepen.
Great. It works relatively well. However, I miss a functionality. When the video is paused and I drag slider on the seekbar, the video frames are not updating real time, only after you "put" the slider down (mousedown).
As you can see here, with the native html5 video functionality it's done like that: while you drag the bar, the video updates to the current frame your cursor is on. For me this would be quite important.
So, how could I make this happen? The problem lies in the nature of .addEventListener("change"), doesn't it?
<div class="row">
<div class="col-sm-4" id="video-container">
<!-- Video -->
<video id="video" muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play-pause" class="play"><img src="https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg"></button>
<input type="range" id="seek-bar" value="0">
<button type="button" id="full-screen"><img src=https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_fullscreen_white_24px.svg></button>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var fullScreenButton = document.getElementById("full-screen");
// Sliders
var seekBar = document.getElementById("seek-bar");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
$('img', playButton).attr("src","https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_pause_white_24px.svg");
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
$('img', playButton).attr("src","https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg");
}
});
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the seek handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
$('#video-controls').width($('video').width());
$('#seek-bar').width($('video').width() -105);
}
</script>

I got it done by changing the .addEventListener("change") to .addEventListener("input"), but maybe this question could be helpful for someone so I didn't delete it.

How to pause/stop playing audio and replace with new audio file

So when the user clicks a button an audio file plays from an array of audio files(around 2 sec clip), which works fine. However, if the user repeatedly clicks the button, the audio files start to play over each other. Ideally, I would like to stop/pause the previous audio file and then play the new audio file. This is what I've tried to avail:
$scope.sounder=function(){
$scope.rs=$scope.diff[$scope.workout_index].audiorep;
$scope.ms=$scope.diff[$scope.workout_index].audiomove;
//var movesound = new Audio ($scope.ms);
//ar repsound = new Audio ($scope.rs);
var movesound = new Media($rootScope.getMediaURL($scope.ms));
var repsound = new Media($rootScope.getMediaURL($scope.rs));
if($scope.muter==0){
movesound.pause();//DOES NOT WORK
movesound.stop();//STOPS ALL AUDIO FROM PLAYING, SO NOTHING PLAYS
$timeout(function() {
movesound.play();
}, 1000);
$timeout(function() {
repsound.play();
}, 3000);
}
if($scope.muter==1){
console.log("Rachel has been muted");
return;
}
}

You can achieve the functionalities with JavaScript in Cordova unless you specifically need AngularJS in your app.
<audio controls id="myAudio">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the HTML5 audio tag.
</audio>
Now using script to add functionalities -
<script>
var aud= document.getElementById("myAudio");
function playAud() {
aud.play();
}
function pauseAud() {
aud.pause();
}
function myFunction() {
isSupp = aud.canPlayType("audio/mp3");
if (isSupp == "") {
aud.src = "audio.ogg";
} else {
aud.src = "audio.mp3";
}
aud.load();
}
</script>
See other answers of this question on for changing source of audio with JavaScript.
Refer w3schools HTML Audio Video DOM reference Page for further attributes and functions.

Turn off volume control and mute button in HTML5 video

We have some videos playing great in our HTML mobile app. However, our videos don't have sound, just subtitles, so we need to remove the volume slider and mute button but keep the timer bar.
Can this be done or toggled with HTML or CSS? Or is some javascript required to do this?
At the moment the setting within our html tag is just: controls="controls"

This has worked:
video::-webkit-media-controls-volume-slider {
display:none;
}
video::-webkit-media-controls-mute-button {
display:none;
}

Super easy:
Your html should be something like:
<video id="Video1">
<source src="..." type="video/mp4">
<source src="..." type="video/ogg">
Your browser does not support HTML5 video.
</video>
Add then a customized button to play the video:
<button id="play" onclick="vidplay()">></button>
Finally a progress bar:
<progress id="progressbar" value="0" max="100"></progress>
Then in javascript add a button to play
var video = document.getElementById("Video1");
function vidplay() {
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
And a listener to update the progress bar:
video.addEventListener('timeupdate', updateProgressBar, false);
function updateProgressBar() {
var progressBar = document.getElementById('progressbar');
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
progressBar.value = percentage; progressBar.innerHTML = percentage + '% played';
}
So basically remove the "standard controls" and create your own ones.
If you wanted to achieve more complicated results, I would recommend you another option. This could be using a more configurable setting such as video.js.

Remove the controls attribute from the video element completely.
Try Here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls. Remove the "controls" attribute and the bar will disappear.

Start playing HTML5 Video only after the complete video is buffered

Is there a way I can start playing my HTML5 MP4 video only after the entire video is buffered (100%). When it is in the process of buffering, I should display the Loading screen. Please help. This code should work in both Firefox and IE11.
Hyperlink Titles Example :
- Play Video1: Fav Foods - Play Video1: Fav Veg - Play Video2: Fav Animal
And here is the code I have when I click on the hyperlink and also the Video tags. I load the video dynamically from the database. The attribute 'pos' tells the time in seconds where the player has to seek playing.
<video id="VideoContainer" controls="controls" style="width:500px;height:320px" preload="auto">
<source id="VideoData" src=#Model.IntroVideoPath type="video/mp4" />
Your browser does not support the video tag.
<a onclick="navVideo('#items.FileName','#items.StartSec');">#items.DisplayText</a>
function navVideo(fileName, pos) {
//Get Player and the source
var player = document.getElementById('VideoContainer');
var mp4Vid = document.getElementById('VideoData');
var mp4CurVid = $(mp4Vid).attr('src');
//Reload the player only if the file name changes
if (mp4CurVid != fileName) {
$(mp4Vid).attr('src', fileName);
player.load();
player.play();
if (pos != 0) {
setTimeout(function () {
player.currentTime = pos;
player.play();
}, 1000);
}
}
else {
player.pause();
player.currentTime = pos;
player.play();
}

The problem was with the encoding technique for that MP4 file. I encoded with different settings (random settings options for Mp4) and finally got that to work without buffer.

You could use the this http://videojs.com/ to get that to work.