Problem and question
In a reveal.js presentation, I want to include a long video file. I want to have the playblack stop at certain positions, so that I have time to explain to the audience what they’re seeing. Then, I want to have the playback continue when I click. How can I do this?
Unsuccessful attempts so far
My attempts are as follows. I split the video file into parts 1.webm, 2.webm, 3.webm and so on, such that each part ends where I want to have a break. My idea then is to
Override the keydown event of Reveal.js so that it doesn’t go to the next slide, but instead executes my Javascript. How can I do something like this?
<div class="slides">
<section class="video-stepper">
<video>
<source data-src="1.webm" type="video/webm" />
</video>
</section>
</div>
<script>
$(function() {
// How can I do this?
Reveal.addEventListener('click', function(event) {
if ($(event.currentSlide).hasClass('video-stepper')) {
event.preventDefault();
// change 'src' of the video element and start the playback.
}
});
});
</script>
Use fragments and autoplay the video when it is shown:
<div class="slides">
<section class="video-stepper">
<video class="fragment current-visible video-step">
<source data-src="1.webm" type="video/webm" />
</video>
<video class="fragment current-visible video-step">
<source data-src="2.webm" type="video/webm" />
</video>
<video class="fragment current-visible video-step">
<source data-src="3.webm" type="video/webm" />
</video>
</section>
</div>
<script>
$(function() {
Reveal.addEventListener('fragmentshown', function(event) {
if ($(event.fragment).hasClass('video-step')) {
event.fragment.play();
}
});
});
</script>
And some CSS taken from the question Hide reveal.js fragments after their appearance, so that the fragments stack on top of each other:
.fragment.current-visible.visible:not(.current-fragment) {
display: none;
height:0px;
line-height: 0px;
font-size: 0px;
}
However, this comes with some fading in and out, which looks bad. How can I avoid the fading?
When entering the video slide, you can basically disable reveal.js by calling Reveal.disableEventListeners(), then bind your own logic to the keydown event until you’ve stepped through all videos, before enabling reveal.js again with Reveal.addEventListeners().
Some additional effort is required to avoid flickering when transitioning to the next video. You can add a new <video> element with the new video, place it on top of the current <video> with the help of CSS z-index, play the new video, then remove the old.
HTML
<section class="video-stepper">
<!-- Unlike the other <video> element, this one is not absolutely
positioned. We hide it with CSS, but use it to reserve space
on the slide and compute the optimal width and height. -->
<video class="placeholder stretch">
<source src="1.webm">
</video>
<video class="video-step" data-sources='["1.webm","2.webm","3.webm"]'></video>
</section>
CSS
.video-stepper {
position: relative;
}
video.video-step {
position: absolute;
top: 0;
left: 0;
}
video.video-step.front {
z-index: 10;
}
video.placeholder {
visibility: hidden;
}
Javascript
This is a bit lengthy, but works as desired.
Reveal.addEventListener('slidechanged', function(event) {
if ($(event.currentSlide).hasClass('video-stepper')) {
// When we enter a slide with a step-by-step video, we stop reveal.js
// from doing anything. Below, we define our own keystroke handler.
Reveal.removeEventListeners();
// Set the width and height of the video so that it fills the slide.
var stretcher = $(event.currentSlide).find('video.placeholder').get(0);
var video = $(event.currentSlide).find('video.video-step').get(0);
video.setAttribute('width', stretcher.getAttribute('width'));
video.setAttribute('height', stretcher.getAttribute('height'));
// Convert the data-sources attribute to an array of strings. We will
// iterate through the array with current_video_index.
var sources = JSON.parse(video.getAttribute('data-sources'));
var current_video_index = 0;
// Add a <source> element to the video and set the 'src' to
// the first video.
var source = document.createElement('source');
source.setAttribute('src', sources[0]);
video.appendChild(source);
document.addEventListener('keydown', function step_through_videos(event) {
if (event.which == 39) {
// right arrow key: show next video
// For the next video, create a new <video> element
// and place it on top of the old <video> element.
// Then load and play the new. This avoids flickering.
var new_video = $(video).clone().get(0);
var new_video_source = $(new_video).children('source').get(0);
new_video_source.src = sources[current_video_index];
new_video.load();
$(new_video).addClass('front video-step');
$(new_video).insertAfter(video);
new_video.play();
// Wait a little before removing the old video.
new Promise((resolve) => setTimeout(resolve, 500)).then(function() {
video.remove();
video = new_video;
$(video).removeClass('front');
});
current_video_index = current_video_index + 1;
event.preventDefault();
} else if (event.which == 37) {
// left arrow key: return the counter to previous video
current_video_index = current_video_index - 1;
event.preventDefault();
}
if (0 > current_video_index || current_video_index >= sources.length) {
// Reinstall reveal.js handlers.
document.removeEventListener('keydown', step_through_videos, true);
Reveal.addEventListeners();
console.log('Added reveal.js event listeners.');
}
}, true);
}
});
Related
Been trying to change the source video of an HTML5 video (after clicking a button). However I run into errors. Code and errors below:
Relevant HTML:
<video id="video2" playsinline controls muted preload="auto" style="z-index: -1; position: absolute;">
<source src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >
</video>
(regarding the z-index stuff - this video plays then is grabbed by a canvas which re-draws it, as part of the overall application. Probably not relevant but figured I'd mention it.)
Relevant Javascript. Initiates the video, plays it fine. It's a little esoteric because I started from someone else's sample.
loadCompanionVideo();
export async function loadCompanionVideo() {
setStatusText('Setting up companion video...');
try {
video2 = await loadVideo2();
} catch (e) {
let info = document.getElementById('info');
info.textContent = '(video player) this device type is not supported yet, ' +
'or this browser does not support video capture: ' + e.toString();
info.style.display = 'block';
throw e;
}
}
async function loadVideo2() {
const video2 = await setupVideo2();
return video2;
}
async function setupVideo2() {
const video2 = document.getElementById('video2');
video2.width = videoWidth2; // some external numbers
video2.height = videoHeight2; // just to customize width and height; works fine
return video2;
}
So this is fine, my first video exercise_media/vid_exercise_sample_1.mp4 plays just fine. However, I want to change the video source to exercise_media/vid_exercise_sample_2.mp4, same format, located in same folder, etc. (I made sure this video is fine by hard-coding it into the HTML above, and it also plays just fine.)
Here's what I've been trying for changing it:
function buttonFunctionChangeVideoSrc() {
document.getElementById("video2").pause();
//document.getElementById("#video2 > source").src = "exercise_media/vid_exercise_sample_2.mp4";
document.getElementById("video2").src = "exercise_media/vid_exercise_sample_2.mp4";
document.getElementById("video2").load();
document.getElementById("video2").play();
}
To no avail, neither ("#video2 > source").src nor ("video2").src work. In the first case, the error is:
Uncaught TypeError: Cannot set property 'src' of null
at HTMLButtonElement
The video pauses and stays frozen.
In the second case, trying video2.src directly (same as document.getElementById("video2")), the error is
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
The video portion of the screen goes white/blank.
Play/pause functionality works fine, so I know I have a valid reference to my video2 object. But I cannot seem to change the source. And I also know that the other source video works just fine, as I can hard-code it into the HTML and play it without issue. But I cannot seem to dynamically switch between them.
Any help is much appreciated.
Adding more of my code to take a look at. Don't worry about the pose stuff, it's for my application to analyze the videos, and works fine when I just have one video side by side the webcam (that's what my application does).
The problem is that I cannot change the video2 source to a different MP4. In fact the only way I can have it play an MP4 at all is if I explicitly set it in the HTML.
HTML:
<div id="canvases" class="canvas-container">
<div id='main' style='display:none'>
<video id="video" playsinline style=" -moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
display: none;
">
</video>
<canvas id="output" class="camera-canvas"></canvas>
<canvas id="keypoints" class="camera-canvas"></canvas>
<video id="video2" playsinline controls muted style="z-index: -1; position: absolute;"
>
<source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >
<!-- hard-coding the src in source is the ONLY way I can play a video here at all... -->
</video>
<canvas id="output2" class="camera-canvas2"></canvas>
<canvas id="keypoints2" class="camera-canvas2"></canvas>
<canvas class="illustration-canvas"></cavnas>
<canvas class="illustration-canvas2"></cavnas>
</div>
Javascript:
export async function bindPage() {
setupCanvas();
setupCanvas2();
buttonSetup();
toggleLoadingUI(true);
setStatusText('Loading AI models...');
posenet = await posenet_module.load({
architecture: defaultPoseNetArchitecture,
outputStride: defaultStride,
inputResolution: defaultInputResolution,
multiplier: defaultMultiplier,
quantBytes: defaultQuantBytes
});
setStatusText('Loading FaceMesh model...');
facemesh = await facemesh_module.load();
facemesh2 = await facemesh_module.load();
setStatusText('Loading Avatar file...');
let t0 = new Date();
await parseSVG(Object.values(avatarSvgs)[0]);
setStatusText('Setting up camera...');
try {
video = await loadVideo();
} catch (e) {
let info = document.getElementById('info');
info.textContent = '(web cam) this device type is not supported yet, ' +
'or this browser does not support video capture: ' + e.toString();
info.style.display = 'block';
throw e;
}
try {
video2 = await loadVideo2();
} catch (e) {
console.log("Error loading companion video :: "+e);
}
console.log(video2); // shows the full html
playpauseFunction(); // start video2
toggleLoadingUI(false);
detectPoseInRealTime(video, posenet); //actual application, works fine
}
async function loadVideo2() {
const video2 = await setupVideo2();
return video2;
}
async function setupVideo2() {
const video2 = document.getElementById('video2');
//video2.setAttribute("src", vid_url_1); //does not work
//document.getElementById("source2").src = vid_url_2; // does nothing
videoWidth2orig = video2.videoWidth;
videoHeight2orig = video2.videoHeight; // gives the actual e.g. 640 x 360
//.. I do some stuff below to set video2 width/height, works fine
return video2;
}
function playpauseFunction() {
try {
if (playpause == true) {
video2.pause();
playpause = false;
//alert("Workout paused. Click Play/Pause to resume.");
} else if (playpause == false) {
video2.play();
playpause = true;
}
} catch (e) {
console.log("playpauseFunction exception :: "+e);
}
}
Now, like I said, if I hard-code into HTML the src of <source> tag, i.e. <source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" > the application runs fine and looks like the following:
(Works fine, the webcam plays in real-time next to the video, and I have my skeletal tracking running on the rightside video as it plays.)
What I want to do is click on e.g. "Exercise Sample 2" and change the rightside video, obviously. Nothing I've tried has worked, such as:
function setupExercise2() {
video2.setAttribute('autoplay', 'true');
document.getElementById("source2").src = "exercise_media/vid_exercise_sample_2.mp4";
//video2.setAttribute("src", "exercise_media/vid_exercise_sample_2.mp4"); // have tried both, neither work
video2.load();
const playPromise = video2.play() // trigger video load
console.log(playPromise);
if ( playPromise !== undefined ) {
playPromise.then(() => {
// video should start playing as soon as it buffers enough
}).catch(error => {
// playback failed, log error
console.log(error);
})
}
}
Specifically for the first line (uncommented), the console says:
Promise {<pending>}__proto__: Promise[[PromiseState]]: "pending"[[PromiseResult]]: undefined
The right side video turns white and nothing plays. If I try instead with video2.setAttribute line uncommented, then the console logs:
Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: DOMException: Failed to load because no supported source was found.
code: 9
message: "Failed to load because no supported source was found."
name: "NotSupportedError"
__proto__: DOMException
To be clear, I can hard-code in any of the vid_exercise_sample_{2,3,..}.mp4 into the html and they play and run just fine, so I don't believe that's the issue.
Hopefully I've provided a pretty full picture now!
The following example code shows a video .src being updated dynamically.
There are two buttons used to switch between the different sources.
It has been tested on Windows PC using Chrome, Edge and Firefox browsers.
<!DOCTYPE html>
<html><head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head>
<body>
<video id="video2" width="600" height="480" controls style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 10px">
<source type="video/mp4">
</video>
<canvas id="myCanvas" width="600" height="480" style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 640px">
</canvas>
<div style="z-index: 1; overflow:hidden; position: absolute; top: 510px; left: 10px">
<button onclick="ChangeVideoSrc( 1 )">Play Video 1</button>
<button onclick="ChangeVideoSrc( 2 )">Play Video 2</button>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var timer_DrawCanvas; //# updated later in code
//# Example video links that work on my testing...
vid_url_1 = "https://seed191.bitchute.com/pupNZR0eMW9M/4CU38o2lkgyj.mp4";
vid_url_2 = "https://seed171.bitchute.com/VBdNMrOHylJh/2BMyQPl6BSpZ.mp4";
//# Try your own links if the above works...
//vid_url_1 = "exercise_media/vid_exercise_sample_1.mp4"
//vid_url_2 = "exercise_media/vid_exercise_sample_2.mp4"
//# Set initial starting vid SRC (used on page load)
const myVid = document.getElementById("video2");
myVid.setAttribute("src", vid_url_1);
//# Setup event listeners
myVid.addEventListener("canplay", handle_Media_Events);
myVid.addEventListener("loadeddata", handle_Media_Events);
myVid.addEventListener("play", handle_Media_Events);
myVid.addEventListener("pause", handle_Media_Events);
myVid.addEventListener("ended", handle_Media_Events);
function drawVideo()
{
ctx.drawImage(myVid, 0, 0, 600, 480);
}
function ChangeVideoSrc( vidNum )
{
myVid.src = window[ "vid_url_" + vidNum ];
myVid.load();
}
function handle_Media_Events()
{
//# if enough data to begin playback
if ( event.type == "canplay" ) { myVid.play(); }
//# if first frame is available
if ( event.type == "loadeddata" )
{ ctx.drawImage( myVid, 0, 0, 600, 480 ); } //# draws re-sized
if ( event.type == "play" )
{ timer_DrawCanvas = setInterval( drawVideo, 30 ); }
if ( (event.type == "pause") || (event.type == "ended") )
{ clearInterval( timer_DrawCanvas ); }
}
</script>
</body>
</html>
Hopefully this will give you a reference point towards achieving the quest of "dynamically change source of the HTML5 Video with Javascript". The quest continues...
Ask anything when you've had chance to test the code.
Just tried out a quick snippet and it works without a bother.. So weird..
what I used
const v = document.getElementById("vid");
const s = document.getElementById("src");
function changeVideo() {
s.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
v.load();
v.play();
console.log(s,v);
}
document.getElementById("change").onclick=changeVideo;
<video id="vid" controls autoplay style="width:75%">
<source id="src" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video><br/><br/>
<button id="change">Change the video</button>
must be missing something. I'd be able to say for sure if I saw a live example, but that's completely up to you.
Otherwise found this on W3
'Warning: Don't make your function asynchronous with the async keyword. You'll lose the "user gesture token" required to allow your video to play later.'
You're trying to change the source of the <video> element, not the <source> element..
For a quick solution just add an 'id' to that element and change the 'src' property accordingly.
<source id="video2source" src="yoursource.vid">
JS
document.getElementById('video2source').src = 'newsource.vid';
Keep in mind, a good practice is to store DOM references in variables. Makes it easier for the browser if you don't perform JS DOM reads all the time.
const vid2src = document.getElementById('video2source'); // define variable in the global scope
vid2src.src = 'newsource.vid'; // use the reference everywhere else
Hope this helps! =)
Edit..
Question with a similar problem:
changing source on html5 video tag
Edit numero dos...
Because the play() method is asynchronous, lets try an async solution. =)
const video = document.getElementById("video2");
video.setAttribute('autoplay', 'true'); // just in case
/// ... your previous code ... switch source, and so on and so on
const playPromise = video.play() // trigger video load
console.log(playPromise); // just check what the console tells you
if ( playPromise !== undefined ) {
playPromise.then(() => {
// video should start playing as soon as it buffers enough
}).catch(error => {
// playback failed, log error
console.log(error);
})
}
When async is great and all, using it everywhere is not the best idea.. And some methods(like load() and play() are already asynchronous).
In this fiddle:
https://jsfiddle.net/azdpu3Ly/13/
I used a timer to trigger the change of video source through your setupVideo2 function. But as soon as I add await to the function call, it stops working.
So make sure to NOT call your functions related to the video with an await or follow it with .then(). Synchronous code will work just fine and you won't gain anything with the former..
I am facing a problem to disable the backward and forward keys action for HTML video player. Currently, the default behavior is we can move forward and backward from keys
Here is the code snippet
<style>
audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
display: none;
}
video::-webkit-media-controls-current-time-display {
display: none;
}
video::-webkit-media-controls-time-remaining-display{
display: none;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<video id="home_explainer_placeholder" class="video_placeholder" controls controlsList="nodownload">
<source src="http://re10tive.com/wp-content/uploads/2020/07/Arsenal-football-player-Aubameyang-driving-his-£3-Million-LaFerrari-in-Central-London.mp4" type="video/mp4">
</video>
<script>
Is there any way to achieve this or any kind of solution highly appreciated
Adding listeners for seeking and timeupdate should help you disable the seeking all together, example that I used was originally found here: How to disable seeking with HTML5 video tag ?
Unfortunately, I haven't found any solution that would do it without that annoying lag in the video. Unless of course you have some custom player that would allow you to disable skipping.
var video = document.getElementById('home_explainer_placeholder');
var supposedCurrentTime = 0;
video.addEventListener('timeupdate', function() {
if (!video.seeking) {
supposedCurrentTime = video.currentTime;
}
});
// prevent user from seeking
video.addEventListener('seeking', function() {
// guard agains infinite recursion:
// user seeks, seeking is fired, currentTime is modified, seeking is fired, current time is modified, ....
var delta = video.currentTime - supposedCurrentTime;
if (Math.abs(delta) > 0.01) {
console.log("Seeking is disabled");
video.currentTime = supposedCurrentTime;
}
});
// delete the following event handler if rewind is not required
video.addEventListener('ended', function() {
// reset state in order to allow for rewind
supposedCurrentTime = 0;
});
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
display: none;
}
video::-webkit-media-controls-current-time-display {
display: none;
}
video::-webkit-media-controls-time-remaining-display {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="home_explainer_placeholder" class="video_placeholder" controls controlsList="nodownload">
<source src="http://re10tive.com/wp-content/uploads/2020/07/Arsenal-football-player-Aubameyang-driving-his-£3-Million-LaFerrari-in-Central-London.mp4" type="video/mp4">
</video>
I have video and text that I am displaying when user clicks play button (4 seconds). So my code looks like this:
$('video').on('play', function (e) {
$('#showText').delay(4000).show(0);
});
What I am trying to achieve is hide this text (#showText) 5 seconds before the end of the video. I didn’t find any solution for this, so if anybody can help with this I’ll be more than thankful.
To make this work you can use the standard events associated with media elements. Specifically play and timeupdate. The former you've already covered. The latter fires as the playback progresses. You can use it to check the current position and determine if it's less than 5 seconds from the end, like this:
var $showText = $('#showText');
$('video').on({
play: function() {
$showText.delay(4000).show(0);
},
timeupdate: function(e) {
if ((this.duration - this.currentTime) < 5 && $showText.is(':visible'))
$showText.hide();
}
});
#showText {
display: none;
}
video {
height: 175px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="showText">Lorem ipsum</p>
<video autobuffer controls autoplay>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
You can use video.js to get length of video then you can hide any element at any second before video is ending
var myPlayer = videojs('example_video_1'); //defining videojs
<video id="example_video_1" data-setup="{}" controls="">
<source src="my-source.mp4" type="video/mp4">
</video> //end defining videojs
$('#showText').delay(4000).show(0);
var lengthOfVideo = myPlayer.duration(); // length Of Video in seconds
$(#showText).oneTime(lengthOfVideo-5, function() { // 5 second before video ends
$("showText").hide();
});
Is there any way we can make a HTML5 video to completely stop a video on mouseout?
By stop I mean resetting the video state, just as refreshing the page. All I could get is having the video on pause on mouseout, but this is not what I want.
Thank you.
jsbin:
https://jsbin.com/fenixinuku/edit?html,css,js,output
HTML:
<video class="myvideo" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt=""></video>
JS:
$(document).ready(function() {
$(".myvideo").on("mouseover", function(event) {
$(this).get(0).play();
}).on('mouseout', function(event) {
$(this).get(0).pause();
});
})
EDIT:
Thank you guys, based on your answers I made an alternative to this by displaying the video poster as the first frame ( Thank you Terence Eden for suggestion).
The only small issue is that the image poster is flickering on mouseout..Any better solution ?
HTML:
<video class="myvideo" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" poster="https://www.w3schools.com/images/w3html5.gif"></video>
JS:
$(document).ready(function() {
$(".myvideo").on("mouseover", function(event) {
$(this).get(0).play();
}).on('mouseout', function(event) {
this.load();
});
})
demo 2 jsbin: https://jsbin.com/kivisutici/1/edit?html,css,js,output
Removing the video src property and adding it again should work. Try this inside the mouseout event:
var video = $(this).get(0);
var source = video.src;
video.src = "";
video.src = source;
You can do two things.
First, set the current time to 0.
$(this).get(0).currentTime = 0;
That returns the player position to 0 mins, 0 seconds - as though you had refreshed the page.
Secondly, you can set the poster for the video. By default this is the first frame of the video - but you can set it to any external JPG that you want.
You need to change you mouseout to this
.on('mouseout', function(event) {
$(this).get(0).currentTime = 0
$(this).get(0).pause();
});
Demo
Please try the following and let me know if it worked for you.
// Link here: https://www.w3schools.com/tags/av_prop_currenttime.asp
$(".myvideo"). mouseout(function() {
$(this).get(0).currentTime = 0;
});
or
$(".myvideo"). mouseout(function() {
$(this).currentTime = 0;
});
This is the sample code for stop video, using pause function on mouse-out in HTML5.
<script>
function testover(e)
{
//e.src="movie.mp4";
e.play();
}
function testout(ee)
{
ee.pause();
ee.currentTime =0;
//ee.src=null;
}
</script>
<video width="320" height="240" onmouseover="testover(this)" onmouseout="testout(this)" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Please neglect if it is not useful.
I have a HTML5 video player on my site with three videos. The code I found only supported one video per webpage but I managed to do a hack to make it work with multiple videos per page. The hack is pretty inefficient and I am sure there is a more elegant way to implement this. Here is how my code looks:
// Video
var video = document.getElementById("video");
var video2 = document.getElementById("video2");
var video3 = document.getElementById("video3");
// Buttons
var playButton = document.getElementById("play-pause");
var playButton2 = document.getElementById("play-pause2");
var playButton3 = document.getElementById("play-pause3");
// Event listener for the play/pause button 1
playButton.addEventListener("click", function () {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
document.getElementById("play-pause").className = "pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
document.getElementById("play-pause").className = "play";
}
});
// Event listener for the play/pause button 2
playButton2.addEventListener("click", function () {
if (video2.paused == true) {
// Play the video
video2.play();
// Update the button text to 'Pause'
document.getElementById("play-pause2").className = "pause";
} else {
// Pause the video
video2.pause();
// Update the button text to 'Play'
document.getElementById("play-pause2").className = "play";
}
});
// Event listener for the play/pause button 3
playButton3.addEventListener("click", function () {
if (video3.paused == true) {
// Play the video
video3.play();
// Update the button text to 'Pause'
document.getElementById("play-pause3").className = "pause";
} else {
// Pause the video
video3.pause();
// Update the button text to 'Play'
document.getElementById("play-pause3").className = "play";
}
});
}
As you can see I went down the route of simply duplicating the event listener and creating new variables. There must be a way to select the target based on the specific Div selected, maybe through specifying the path of the class? I.e. .container .video1 .play?
The second problem I am having is reverting the pause button and poster image back to the original state after the video has finished playing.
Here is the site where the code and content is placed:
http://www.glowdigital.net/index.php?page=snap-inspire
Any help would be much appreciated!
Thank you
There must be a way to select the target based on the specific Div selected, maybe through specifying the path of the class?
Yes there are better ways of event handling a group of elements.
Event delegation is when the event listener is registered on an ancestor element that the target elements have in common.
Arrays can be used by keeping track of an index number.
The following demo will address the latter.
The second problem I am having is reverting the pause button and poster image back to the original state after the video has finished playing.
Many ways to handle that. The demo demonstrates the use of the CSS ::after pseudo-element and add/removeClass() methods.
I also added exclusive playback capabilities as well. If a player is playing and
another player starts to play, the player that was playing will stop playing.
Details are commented in demo
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>HTML5 Video Player Group - Exclusive Playback</title>
<style>
button {
color: rgba(66, 200, 150, 1);
background: none;
border: 0;
font: 400 24px/1 Verdana;
outline: 0;
cursor: pointer;
}
button:hover,
button:active,
button:focus {
color: #0F3
}
.play.toPause::after {
content: '⏸';
font: inherit;
}
.play.toPlay::after {
content: '▶';
font: inherit;
}
.stop::after {
content: '⏹';
font: inherit;
}
</style>
</head>
<body>
<header> </header>
<main id="media">
<figure class="vSection">
<video id="v0" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-1.jpg">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-1.webm" type="video/webm">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-1.mp4" type="video/mp4">
</video>
<figcaption class="controls">
<button type="button" class="play toPlay"></button>
<button type="button" class="stop"></button>
</figcaption>
</figure>
<figure class="vSection">
<video id="v1" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-2.jpg">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-2.webm" type="video/webm">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-2.mp4" type="video/mp4">
</video>
<figcaption class="controls">
<button type="button" class="play toPlay"></button>
<button type="button" class="stop"></button>
</figcaption>
</figure>
<figure class="vSection">
<video id="v2" width="320" height="auto" poster="http://www.glowdigital.net/images/projects/snap-inspire-3.jpg">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-3.webm" type="video/webm">
<source src="http://www.glowdigital.net/images/projects/snap-inspire-3.mp4" type="video/mp4">
</video>
<figcaption class="controls">
<button type="button" class="play toPlay"></button>
<button type="button" class="stop"></button>
</figcaption>
</figure>
</main>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
// Gather all <video> into a NodeList then convert it into an array
var videos = Array.from(document.querySelectorAll('video'));
/* map() through array assigning an id to each <video>
|| vArray is returned; an array of <video id='..'>
*/
var vArray = videos.map(function(vid, idx) {
var player = document.getElementById(vid.id);
return player;
});
// When a button.play is clicked...
$('.play').on('click', function(e) {
// Get it's index number
var idx = $('.play').index(this);
/* Invoke functiom excPlay passing the vArray and idx
|| It stops any player if it's playing and the prepares
|| the specified player to play. See bottom of source
|| for details
*/
var player = excPlay(vArray, idx);
// If paused or ended...
if (player.paused || player.ended) {
// Play video
player.play();
// Switch the classes for the all buttons to the paused state
$('.play').removeClass('toPause').addClass('toPlay');
// Switch this button to the playing state
$(e.target).addClass('toPause').removeClass('toPlay');
}
//...Otherwise...
else {
// Pause the video
player.pause();
// Switch all buttons to the paused state
$('.play').removeClass('toPause').addClass('toPlay');
}
// Click thebutton.stop...
$('.stop').on('click', function(e) {
// Get index number
var index = $('.stop').index(this);
// See line 73
var player = excPlay(vArray, index);
// Pause the video
player.pause();
// Set video's time back to 0
player.currentTime = 0;
});
// If a video ends...
$('video').on('ended', function() {
// Reset the time
this.currentTime = 0;
// Get its poster value...
var image = this.poster;
// ,,,then set it
this.poster = image;
// Set all buttons to pause state
$('.play').removeClass('toPause').addClass('toPlay');
});
/* Pass in an array of video objects and the index number of
|| thevideo you want to play.
*/
function excPlay(array, exclude) {
// map() the array of videos; on each loop...
array.map(function(video, index) {
// If the video isn't the video you want to play...
if (index != exclude) {
// Get the video's poster
var image = video.poster;
// Set the time back to the beginning
video.currentTime = 0;
// Pauase video
video.pause();
// Reset the poster image
video.poster = image;
}
});
// Toggle the classes on the play button
$('.play').removeClass('toPause').addClass('toPlay');
// Return the selected player or nothing
return array[exclude] || null;
}
});
</script>
</body>
</html>