I'm trying to build a video carousel based on the hover event
so when the user hover over the first video it should play and when hovering on the second video then the first video should stop and the second video needs to play
I have achieved to play video on hover.
I need help in stopping other videos when playing current
document.querySelectorAll('.Main--VideoOuter').forEach((video) => {
video.addEventListener('mouseover', function (event) {
var playPromise = this.querySelector('video').play();
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
// We can now safely pause video...
this.pause();
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
});
});
* {
box-sizing: border-box;
}
body,
{
padding: 0;
margin: 0;
}
.main {
display:flex;
}
.main video{
max-width:300px;
margin:0 25px
}
<div class="main ">
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline > </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
</div>
See fiddle at the end of this answer. Here is the JS code that includes the functionality that you need:
document.querySelectorAll('.Main--VideoOuter').forEach((video) => {
video.addEventListener('mouseover', function (event) {
var playPromise = this.querySelector('video').play();
document.querySelectorAll('.Main--VideoOuter').forEach(videoOuter => {
if (videoOuter !== event.currentTarget) {
videoOuter.querySelector('video').pause();
}
});
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
// We can now safely pause video...
this.pause();
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
});
});
On video hover you simply just iterate through your "Main--VideoOuter"-Element and you stop() every video which is not the one you are currently hovering.
document.querySelectorAll('.Main--VideoOuter').forEach((video) => {
video.addEventListener('mouseover', function (event) {
var playPromise = this.querySelector('video').play();
document.querySelectorAll('.Main--VideoOuter').forEach(videoOuter => {
if (videoOuter !== event.currentTarget) {
videoOuter.querySelector('video').pause();
}
});
if (playPromise !== undefined) {
playPromise.then(_ => {
// Automatic playback started!
// Show playing UI.
// We can now safely pause video...
this.pause();
})
.catch(error => {
// Auto-play was prevented
// Show paused UI.
});
}
});
});
* {
box-sizing: border-box;
}
body,
{
padding: 0;
margin: 0;
}
.main {
display:flex;
}
.main video{
max-width:300px;
margin:0 25px
}
<div class="main ">
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline > </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
</div>
Related
I have apply plyr.js with play and pause events to automatically enter and exit fullscreen respectively.
but the events methods not working on multiple videos it only works when I apply single video.
HTML
<div class="video-container mini-canvas">
<video id="player" playsinline class="js-player">
<source src="./background-image3.mp4" type="video/mp4" />
</video>
</div>
<div class="video-container mini-canvas">
<video id="player" playsinline class="js-player">
<source src="./background-image3.mp4" type="video/mp4" />
</video>
</div>
JS
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p, {
clickToPlay: true,
}));
players.on('play', function() {
console.log('Play')
players.fullscreen.enter();
document.querySelector('.video-container').classList.remove('mini-canvas')
})
players.on('pause', function() {
console.log('Pause')
players.fullscreen.exit();
document.querySelector('.video-container').classList.add('mini-canvas')
})
CSS
.video-container {
width: 150px;
margin: 0 auto;
}
.video-container.mini-canvas > .plyr {
filter: blur(2px);
}
.video-container.mini-canvas .plyr__controls {
display: none;
}
Below is the link to download HTML file
https://github.com/Yusufzai/issue-plyer.js-github.git
Any help would be appreciated
It took me some time but I figure out my mistake what I am doing wrong.
I am not implementing it in the loop to extract those values
for (let index = 0; index < players.length; index++) {
players[index].on('play', function() {
console.log('Play')
players[index].fullscreen.enter();
document.querySelector('.video-container').classList.remove('mini-canvas')
})
players[index].on('pause', function() {
console.log('Pause')
players[index].fullscreen.exit();
document.querySelector('.video-container').classList.add('mini-canvas')
})
}
I have two locally hosted videos on the same page. I am trying to stop one once another is clicked, but it does not work.
<div class="banner has-hover has-video is-full-height is-selected" id="banner-1353813713" style="position: absolute; left: 0%;">
<div class="banner-inner fill">
<div class="banner-bg fill">
<div class="bg fill bg-fill "></div>
<div class="video-overlay no-click fill visible"></div>
<video class="video-bg fill visible" preload="" playsinline="" autoplay="" muted="" loop=""> <source src="https://www.exampledomain/video1.mp4" type="video/mp4"></video> </div>
<div class="banner-layers container">
<div class="fill banner-link"></div>
<div id="text-box-585511097" class="text-box banner-layer x10 md-x10 lg-x10 y35 md-y35 lg-y35 res-text">
<div class="text-box-content text dark">
<div class="text-inner text-center">
<a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
<span>View Video</span> </a>
<a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
<span>Offers</span></a>
<div class="video-button-wrapper" style="font-size:70%"><i class="icon-play" style="font-size:1.5em;"></i></div>
<p>Click to view full video</p>
</div>
</div>
I have tried listening to the classes onlick, but it has not worked:
<script>
$(".video-bg fill visible").on("click", function() {
// All but not this one - pause
$(".video-bg fill visible").not( this ).each(function() {
this.pause();
});
// Play this one
// this.play();
// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();
});
</script>
Here is a simple POC using vannila JS relying on play event. You can also use load() instead of pause() to start the video from beginning (instead of just pausing).
Reference https://www.w3schools.com/tags/ref_av_dom.asp
// assume only one video is playing at a time
var videoPlaying = null;
const onPlay = function() {
if (videoPlaying && videoPlaying != this) {
videoPlaying.pause()
}
videoPlaying = this
}
// init event handler
const videos = document.getElementsByClassName("video-bg")
for (let i = 0; i < videos.length; i++) {
videos[i].addEventListener("play", onPlay)
}
<video id="video-1" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="video-2" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
If you only want that one video should pause when another is played this might help. Note: I am not using any style except for video's height and width . This code rely on onplay call from html and pause()
function playVideo1() {
document.getElementById('video2').pause();
}
function playVideo2() {
document.getElementById('video1').pause();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stop either</title>
<style>
#video1 {
height: 200px;
width: 200px;
float: left;
}
#video2 {
height: 200px;
width: 200px;
float: right;
}
</style>
</head>
<body>
<video controls id="video1" onplay="playVideo1();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></video>
<video controls id="video2" onplay="playVideo2();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"></video>
<script type="text/javascript" src="a.js"></script>
</body>
</html>
Video are from here and here i am not responsible for them.
Hi tested a theory but you'll have to create buttons to play/pause
theory => do a .each on all video tags
this code below : when you click the words PLAY => it will pause the other video if it's playing
like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" ></script>
<script>
function pause_all_videos () { $("video").each(function() { this.pause(); }); }
function playonly (vid) { pause_all_videos(); document.getElementById(vid).play(); }
</script>
<style>
div{padding:3px;margin:3px;}
</style>
<div>
<video id="v1" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" ></video>
<div><span onclick="playonly('v1');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>
<hr>
<div>
<video id="v2" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" ></video>
<div><span onclick="playonly('v2');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>
You can do this by taking the video tag and the pause method.
function videoone() {
document.getElementById("videotwo").pause();
document.getElementById("videothree").pause();
document.getElementById("videofour").pause();
}
In the code above, the name of the verb related to onplay is in the video tag
// assume only one video is playing at a time
var videoPlaying = null;
const onPlay = function() {
if (videoPlaying && videoPlaying != this) {
videoPlaying.pause()
}
videoPlaying = this
}
// init event handler
const videos = document.getElementsByClassName("video-bg")
for (let i = 0; i < videos.length; i++) {
videos[i].addEventListener("play", onPlay)
}
<video id="video-1" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="video-2" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
i am using plyr.io for my videos. and i need to add download button at bottom and also need on progress show thumbnails like youtube progress thumbnails, is it possible to add ? or we can you any other plugin? if have any plugin for integrate in current plyr.io player so please share with me thanks.
document.addEventListener('DOMContentLoaded', () => {
// This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
const player = new Plyr('#player');
// Expose
window.player = player;
// Bind event listener
function on(selector, type, callback) {
document.querySelector(selector).addEventListener(type, callback, false);
}
// Play
on('.js-play', 'click', () => {
player.play();
});
// Pause
on('.js-pause', 'click', () => {
player.pause();
});
// Stop
on('.js-stop', 'click', () => {
player.stop();
});
// Rewind
on('.js-rewind', 'click', () => {
player.rewind();
});
// Forward
on('.js-forward', 'click', () => {
player.forward();
});
});
/* This is purely for the demo */
.container {
max-width: 800px;
margin: 0 auto;
}
.plyr {
border-radius: 4px;
margin-bottom: 15px;
}
<script src="https://cdn.plyr.io/3.4.6/plyr.js"></script>
<link href="https://cdn.plyr.io/3.4.6/plyr.css" rel="stylesheet"/>
<div class="container">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<!-- Video files -->
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440">
<!-- Caption files -->
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
default>
<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
</video>
<div class="actions">
<button type="button" class="btn js-play">Play</button>
<button type="button" class="btn js-pause">Pause</button>
<button type="button" class="btn js-stop">Stop</button>
<button type="button" class="btn js-rewind">Rewind</button>
<button type="button" class="btn js-forward">Forward</button>
</div>
</div>
you can add a download button by adding it to the list of controls you want to show:
const player = new Plyr('#player', {
// Default controls
controls: [
'play-large',
// 'restart',
// 'rewind',
'play',
// 'fast-forward',
'progress',
'current-time',
'mute',
'volume',
'captions',
'settings',
'pip',
'airplay',
'download',
'fullscreen',
],
});
For the thumbnails on seek/scrubber there is an open request, but no updates... so unless someone wants to contribute one it may be a while.
Update [Dec 13 2018]: looks like there's a PR to support thumbnails on the scrubber/seekbar that's looking goodUpdate [Jan 5 2019]: looks like the change has been merged
I have been searching for solution but until now I had not the solution
I have many videos on a canvas ... I need to pause the playing video if another one start playing ?????
thanks for any answer
this is my code for more explanation ...
html
<div class="cont">
<canvas id="myCan" class="cont"></canvas>
<div class="mainVidCont">
<video id="vid1" class="myVid" accesskey="1" controls >
<source src="video9.mp4" type="video/mp4"/>
</video>
<video id="vid2" class="myVid" accesskey="2" controls >
<source src="video6.mp4" type="video/mp4"/>
</video>
<video id="vid3" class="myVid" accesskey="3" controls >
<source src="video23.mp4" type="video/mp4"/>
</video>
<video id="vid4" class="myVid" accesskey="4" controls >
<source src="video24.mp4" type="video/mp4"/>
</video>
<video id="vid5" class="myVid" accesskey="5" controls >
<source src="Adele - Send My Love To Your New Lover.mp4" type="video/mp4"/>
</video>
<video id="vid6" class="myVid" accesskey="6" controls >
<source src="video11.mp4" type="video/mp4"/>
</video>
</div>
</div>
CSS
.cont{
position:absolute;
width:100%;
height:100%;
bottom:0;
right:0;
top:0;
left:0;
}
mayCan
{
opacity:1;
}
.myVid
{
position:relative;
width:200px;
height:auto;
margin:5px;
}
.mainVidCont
{
position:fixed;
width:250px;
overflow-y:auto;
right:0;
bottom:0;
top:0;
left:0;
}
javascript
var x = document.getElementsByTagName("video");
window.onload = function(){
var c = document.getElementById("myCan");
var ctx = c.getContext("2d");
for(i=0 ; i < x.length ;i++)
{
c.ondblclick = function()
{
if( c.height == "150"){
c.height="250";
c.width="400"
}
else {
c.height="150";
c.width="300";
}
}
drawVideo(ctx,x[i],c.width,c.height);
}
videos=document.getElementsByTagName("video");
}
function drawVideo(ct,v,w,h)
{
if(v.paused){
ct.drawImage(v,0,0,0,0);
}
else if(v.played){
ct.drawImage(v,0,0,w,h);
}
setTimeout(drawVideo,100,ct,v,w,h);
}
<script>
window.onload=function(){
videos=document.getElementsByTagName("video");
videos.forEach(function(video){
video.onplay=function(){
videos.forEach(function(avideo){
avideo.stop();
});
video.play();
};
});
};
</script>
This loops trough all videos, and adds an eventlistener to the videos, that stops all the others when it is clicked.
I am using video.js to create a player that needs to be played on multiple devices. I have an custom (return to menu) button that is placed on top right corner of the video. I need to add/remove (vjs-fade-out) class to it according to the user interaction (mouseover, mouseout, tap, playe, pasue, ...).
I have this so far that has some bugs...
HTML:
<div class="menu-btn">
<a href="../index.html">
<img src="../img/back.svg" width="50">
</a>
</div>
<video id="myPlayer" class="video-js vjs-sublime-skin" width="1024px" height="768px" controls autoplay preload data-setup='{"nativeControlsForTouch": false}'>
<source src="../video/test.mp4" type='video/mp4' />
<track class="caption" kind="captions" src="../video/test.vtt" type="text/plain" srclang="en" label="English" default />
</video>
CSS:
.menu-btn {
z-index: 1000;
position: absolute;
top: 10px;
left: 10px;
}
jQuery:
videojs("myPlayer").on('mouseout', function() {
$(".menu-btn").addClass('vjs-fade-out');
});
videojs("myPlayer").on('mouseover', function() {
$(".menu-btn").removeClass('vjs-fade-out');
});
videojs("myPlayer").on('tap', function() {
if (videojs("myPlayer").userActive()) {
$(".menu-btn").removeClass('vjs-fade-out');
} else {
//do nothing
}
}, 1500);
and I want to change it to something like this using userActive:
$(document).ready(function() {
if (videojs("myPlayer").userActive()) {
$(".menu-btn").removeClass('vjs-fade-out');
} else {
$(".menu-btn").addClass('vjs-fade-out');
}
});
I think I found the answer
myPlayer.on("useractive", function() {
$(".menu-btn").removeClass("vjs-fade-out");
});
myPlayer.on("userinactive", function() {
$(".menu-btn").addClass("vjs-fade-out");
});