Jquery : Play video in bootstrap slider - javascript

i want to play video when item gets active class in bootstrap slider below is my code
<div class="item" id='mobileapp'>
<video loop controls width="100%" id='video'>
<source src="../../vid.mp4" width="100%" height="100%" type="video/mp4"> Your browser does not support the video tag.
</video>
<div class="overlay"></div>
<div class="carousel-caption">
<h1 class="super-heading text-white">Heading</h1>
<div class='row'>
<div class='col-sm-2 col-sm-offset-1'>
<img src='../img/googleplay.png' class='img-responsive hidden-xs' />
</div>
<div class='col-sm-2'>
<img src='../img/applestore.png' class='img-responsive hidden-xs' />
</div>
</div>
</div>
</div>
Js
<script>
$(document).ready(function () {
if ($('#mobileapp').hasClass('active')) {
$('#video')[0].play();
}
else {
$('#video')[0].pause();
}
})
</script>
active class gets added but it does not pay video

the functions 'play' and 'pause' are not jquery functions, they belong to the DOM element. Now to make it work try to execute your code every 10 miliseconds or something like that.
Try:
var videoElt = document.getElementById('video');
$(document).ready(function () {
setInterval(function () {
if ($('#mobileapp').hasClass('active')) {
videoElt.play(); // to play the video
}
else {
videoElt.pause(); // to pause the video
}
}, 10);
});

Related

the play button not working for the external video

When I click on the play/pause button nothing seems to happen, after clicking on the video I want to play, the vs code is not finding me any error nor the dev console.
I don't know what the issue is with the play/pause button.
Also, there is some issue with the third video, when I click on the third video it gives the following error:
Failed to load resource: the server responded :5500/favicon.ico:1 with a status of 404 (Not Found)
window.onload = init;
function init() {
var frame1 = document.querySelector('#video1');
frame1.innerHTML += ' <br> <button id="play">play </button> <button id="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> ';
}
//to play another video
var click = document.querySelectorAll('#videos > div');
click.forEach(function(elem) {
elem.addEventListener('click', nextPlaylist);
function nextPlaylist(evt) {
var save = elem.querySelector('.video').currentSrc;
var save1 = elem.querySelector('.video');
elem.innerHTML = `<video class="video" > <source src="${save}"> </video> <br> <button id="play">play </button> <button id="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> `;
var play = document.querySelector('#play');
play.addEventListener('click', playVid);
var pause = document.querySelector('#pause');
pause.addEventListener('click', pauseVid);
function playVid() {
save1.play();
}
function pauseVid() {
save1.pause();
}
}
}
);
<body>
<header class="head">
VIDEO PLAYER
</header>
<div id="videos">
<div id="video1">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2018_04/preview/180301_06_A_CityRoam_03.mp420186.webm">
</video>
</div>
<div id="video2">
<video class="video" controls>
<source src= "https://www.videvo.net/videvo_files/converted/2016_01/preview/Forest_15_2_Videvo.mov92730.webm">
</video>
</div>
<div id="video3">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
</video>
</div>
</div>
<script src="video.js"></script>
</body>
There are several issues with the code.
You declare the video element but then override it.
var save1= elem.querySelector('.video');
but then, you remove that element and render a different one
elem.innerHTML = `<video class="video" >...
So you need to retrieve it again (or just move var save1= elem.querySelector('.video'); after the line above.
When the user clicks on the buttons the parent's listener (elem.addEventListener('click', nextPlaylist); also get fired, so it re-render the videos.
To avoid that, use stopPropagation to prevent from the event from propagate to the parent
You have multiple id attribute with the same value (when the user clicks on more than one video) so document.querySelector catch the first one (which wasn't work too because the reasons above).
Replace the ids to classes and use elem.querySelector instead of document.querySelector to make sure it will find the buttons in a specific div.
//to play another video
var click = document.querySelectorAll('#videos > div');
click.forEach(function(elem) {
elem.addEventListener('click', nextPlaylist);
});
function nextPlaylist(evt) {
const elem = evt.currentTarget;
var save = elem.querySelector('.video').currentSrc;
elem.innerHTML = `<video class="video" > <source src="${save}"> </video> <br> <button class="play">play </button> <button class="pause">pause</button> <button id="volume-up">volume up</button> <button id="volume down">volume-down</button> <button id="mute">mute</button> `;
var save1 = elem.querySelector('.video');
var play = elem.querySelector('.play');
play.addEventListener('click', playVid);
var pause = elem.querySelector('.pause');
pause.addEventListener('click', pauseVid);
function playVid(e) {
e.stopPropagation();
save1.play();
}
function pauseVid(e) {
e.stopPropagation();
save1.pause();
}
}
<header class="head">
VIDEO PLAYER
</header>
<div id="videos">
<div id="video1">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2018_04/preview/180301_06_A_CityRoam_03.mp420186.webm">
</video>
</div>
<div id="video2">
<video class="video" controls>
<source src= "https://www.videvo.net/videvo_files/converted/2016_01/preview/Forest_15_2_Videvo.mov92730.webm">
</video>
</div>
<div id="video3">
<video class="video" controls>
<source src="https://www.videvo.net/videvo_files/converted/2016_09/preview/160820_125_NYC_OutOfFocusCarLights5_1080p.mp444096.webm">
</video>
</div>
</div>
By the way, you can move the function out. It's a shame to create new function for each element instead of only one.
https://jsbin.com/koritub/edit?html,js,output

How to link two videos in a website to play at the same time on hover with javascript?

So I am helping my gf with her Uni project. She is a graphic designer and she needed some help with creating a webpage with a video comics.
I made it so that the videos would play on hover with Javascript (this is the first time ever I had to use JS) and now I need a way to bind some of them together - e.g. you hover on one or the other and both play, you remove the mouse and both stop. And I need to do it several times. The website will contain a total of 24 Videos.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/1.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="Resources/2.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
I would go with mouse enter and leave events to avoid redudancy of triggering the execution everytime your mouse is inside the video with movements
$(".thevideo").mouseenter(function(){
console.log("mouse is entered");
$(".thevideo").each(function(){
this.play();
})
})
$(".thevideo").mouseleave(function(){
$(".thevideo").each(function(){
this.pause()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.video').each(function() {
$(this).on("mouseover", function(e) { hoverVideo(e); });
$(this).on("mouseout", function(e) { hideVideo(e); });
});
});
function hoverVideo(i) {
i.target.play();
}
function hideVideo(i) {
i.target.pause();
}
</script>
</head>
<body>
<div class="main">
<h3>Title</h3>
<p>
*Hover over each frame to see the story.
</p>
</div>
<div class="main">
<div class="firstrow">
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<video class="thevideo" loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
</video>
</div>
<div class="video" id="one" >
<img src="Resources/text/tap.svg" />
</div>
</div>
</div>
</body>
At the moment you are only calling the function on 1 video - the video that triggered the event i.target.play();
So you just need to toggle pause and play on all videos inside .firstrow instead:
$(".firstrow .video").on("mouseenter", ()=>{
$(".firstrow video").each((index, video)=>{
video.play();
});
});
$(".firstrow .video").on("mouseleave", ()=>{
$(".firstrow video").each((index, video)=>{
video.pause();
});
});

How to get the source from a video element inside a div and pass it on to another video element - javascript

Im really new to JavaScript and I started a new project that consists in a video player and editor.
I have this modal Box:
<div class="modal" id="myModal">
<div class="modal-header">
</div>
<div class="modal-body">
<video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video>
</div>
<div class="modal-footer">
</div>
</div>
And I have this video previews that I've done like this:
<article hover class="thumb">
<div id="myModal" class="modal">
<div class="modal-content" id="ModalVideo">
<span class="close">×</span>
</div>
</div>
<img src="images/thumbs/eminem.jpg" class="image" alt="">
<div class="video" id="ClickHere"><video src="images/movie.mp4.mp4" autoplay muted class="videoPreview" id="Video1"></video></div>
</article>
<article hover class="thumb">
<div id="myModal" class="modal">
<div class="modal-content" id="ModalVideo">
<span class="close">×</span>
</div>
</div>
<img src="images/thumbs/eminem.jpg" alt="" class="image" />
<div class="video" id="ClickHere"><video src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" autoplay muted class="videoPreview" id="Video2"></video></div>
</article>
What I need is this: When the user clicks on the <div class="video"> inside the article I have to get the source of the video element inside it and pass it on to the source of video element inside the modal box.
For that I've tried to do this in JavaScript:
<script>
function Video()
{
var Source = $("#video1 source").attr("src");
$('#ModalVideo video source').attr('src', Source);
$("#ModalVideo video")[0].load();
}
</script>
Which is working but only for the video element with the "video1" ID and I need it work for every video element. Is there a way to get the video source when the user clicks the div without having to attribute an id to every video element and use "onClick"?
Thank you for your help, if you have any questions or suggestions please address them to me.
<div id="myModal" class="modal">
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
If you have a basic modal, you can change the source of video and start to play.. but first, stay away to use same id into different tags in same page. Second; to use "this" as a parameter, is more simple way to catch clicked div or another tag...
<article :hover class="thumb" onclick="Video(this)">
<img src="images/thumbs/eminem.jpg" class="image" alt="" data-video-src="images/movie.mp4.mp4" data-autoplay=1 data-muted=1 />
</article>
<article :hover class="thumb" onclick="Video(this)">
<img src="images/thumbs/eminem.jpg" alt="" class="image" data-video-src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" data-autoplay=1 data-muted=1 />
</article>
When you use "this" as a parameter, dont need any id to find which div was clicked.
<script>
function Video(t){
var src = $(t).attr("data-video-src");
var autoplay = $(t).attr("data-autoplay");
var muted = $(t).attr("data-muted");
if(muted==1)
$("#video1").attr("muted",true);
else
$("#video1").removeAttr("muted");
$("#video1").find("source").attr("src",src);
if(autoplay==1){
$("#video1").attr("autoplay",true);
$("#video1").play();
}else{
$("#video1").removeAttr("autoplay");
$("#video1").pause();
}
}
</script>
change <video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"></video> to <video src="images/movie.mp4.mp4" autoplay muted id="videoPreview"></video> first.
Attach this function to all your div's of class="video" click event
function Video()
{
var Source = this.getElementsByTagName("video")[0].src;
videoPreview.src = Source;
}
You're on gears now.

Play/Pause multiple video with one function

I can currently play and pause a video by clicking anywhere in the <video> tag.But unfortunately, when i have added a second video the function works only for the first video only.
var video = document.getElementById('vid');
video.addEventListener('click', function() {
this.paused?this.play():this.pause();
},
false);
video.addEventListener("pause", function() {
document.getElementById("paused").style.display = "";
});
video.addEventListener("play", function() {
document.getElementById("paused").style.display = "none";
});
<div id="main">
<div id="computer" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
Any issue with the js code. Kindly advice.
it will not work lake that because ,the interpreter will consider just the last id with the same element ,if you use just two videos then you can just add other video id and paused id
<div id="ip" class="content">
<div style="margin-left:8%">
<div id="paused2" style="display: none">QUESTION HERE</div>
<video width="1000" height="480" id="vid2">
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
try to use classes instud of ids
for more detaill take a lok to this page
http://flash.flowplayer.org/demos/installation/multiple-players.html

how to change html5 source tag and play the video

In my video template site, I want to change the source tag of the video when I'm clicking on HQ, only the video should start playing, without a click on the play button, and the text of the link should change to nq in the same function.
Following the html code
{{if hqnq == true }} //jquery template variable no importance
<div class="toolbar" id="controls">
<div style="float:right">
HQ
// the text of the link should change when you are clicking
</div>
<div style="clear:both"></div>
</div>
{{/if}}
<div id="video_player">
<video autobuffer controls autoplay>
<source src="http://www.tools4movies.com/Droid/Default/Inception.mp4" type="video/mp4" width="auto" height="auto" id="video" />
</video>
</div>
And at least there should be a function that will be performing the task. But how to do that?
<script type="text/javascript">
var button = document.getElementById('player_hq_nq');
function showVideo() {
if (button.title == "nq") {
document.getElementById("video").setAttribute("src", "http://www.tools4movies.com/Droid/Default/Inception.mp4");
document.getElementById("video").load();
document.getElementById("video").play();
} else {
document.getElementById("video").setAttribute("src", "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
document.getElementById("video").load();
document.getElementById("video").play();
button.title = "nq";
}
}
</script>
Here is the fiddle: http://jsfiddle.net/k68Zp/389/
You need to call showVideo() onclick of HQ. so you need to add following code just above the showVideo() function.:
$(document).ready(function(){
$("#player_hq_nq").click(function(){
showVideo();
});
});

Categories