$('a.thumbnail').click(function(){
$(this).('.cu_vd').trigger('play');
});
$('a.thumbnail').click(function(){
$(this).('.cu_vd').trigger('play');
});
I am trying to play the video by trigger but the video boxes are multiple with the same class. So I am trying to use 'this' so that It does not trigger to all, but it's not working This is the HTML page, where I am trying to play the video
https://dev-visualshowcase.cvent.com/bkeventvideos.html click on the IOV 1 (First box) the pop-up triggers and I want to play this video with JS function, instead of autoplay, because autoplay is not supporting in IOS https://dev-visualshowcase.cvent.com/eventvideos.html - here you can check the problem
You can use the data-attribute to target a specific video
<button class="thumbnail" data-target="video_1">Play the video</button>
<video id="video_1" playsinline="" preload="auto" muted="" controls="" loop="">
<source src="https://dev-visualshowcase.cvent.com/VS/video/vd_intro/01.mp4" type="video/mp4">
</video>
Each time you click on the .thumbnail button, you use the data-target to choose your video
$('.thumbnail').click(function(){
let target = $(this).attr('data-target')
$('#' + target).trigger('play');
});
Related
I am creating a page to display a number of videos. I have created a video play button video-item__button to toggle play/pause its respective video, using JQuery. I have created a variable $video containing the location of the video that the button needs to target.
So I am saying - if the button is clicked - find a sibling element with .video-item__video class, then if paused - play/ if playing - pause.
However I am getting the following error message in the console:
"video-page-listing.js?ver=5.7:43 Uncaught TypeError: this.siblings is not a function"
Can anyone suggest a solution for this issue?
<article class="video-item">
<div class="video-item__button"></div>
<video class="video-item__video">
<source src="myvideo.mp4" type="video/mp4">
</video>
</article>
<article class="video-item">
<div class="video-item__button"></div>
<video class="video-item__video">
<source src="myvideo-2.mp4" type="video/mp4">
</video>
</article>
<script>
$(document).ready(function() {
// When 'video-item__button' clicked
$('.video-item__button').click(function(){
// Locate sibling 'video-item__video'
$video = (this).siblings('.video-item__video'); // doesn't work as Siblings not a function
// If video paused: play
if ($video.paused) {
$video.play();
}
// If video play: pause
else {
$video.pause();
}
});
});
</script>
I am able to pause and play the video onclick of the video itself. I want to be able to add a div in the video when the video is paused. Like a Play button. How do I do that ?
Do I need to add another div as an overlay and show it when the video is paused? If yes, how do I implement with the current code?
Working code for the video:
<video height="100%" width="100%" preload="none" onclick="this.paused ? this.play() : this.pause();">
<source type="video/mp4" src="myvideo.mp4">
</video>
Many thanks.
I need to set a listener for a video on SurveyGizmo that allows me to execute a function when the video ends. The HTML is as follows:
<div class="mejs-mediaelement">
<video height="534" width="800" src="urlOfTheVideo" type="video/mp4"></video>
</div>
so far I've tried to do this but it is not working:
<script>
function trailerEnd() {
document.getElementByClassName('mejs-mediaelement').addEventListener('ended',alertThem);
function alertThem(e) {
alert('video has ended');
};
};
trailerEnd();
If video is immediate child element of .megs-mediaelement div, then you could select video element and add event to it like this.
mediaelement.js adds an extra wrapper around video tag, so using immediate child selector(>) won't work. Updated answer with decnendent selector. It should work now.
var videoBlock = document.querySelector('.megs-mediaelement video');
videoBlock.addEventListener('ended', trailerEnd, false);
function trailerEnd(){
console.log('video ended');
}
<div class="megs-mediaelement">
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/TAgs/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/TAgs/movie.ogg" type="video/ogg">
</video>
</div>
Alternative you could also just select the video by using var videoBlock = document.querySelector('video'); if there only one video on the page.
The code snippet is given below. I have used impress.js to create an online presentation. I want to insert a video in the last slide which autoplays when the slide comes up. But I am unable to implement that. Can anyone please help me with this?
<div class="step box" data-x="0" data-z="4000" data-rotate-y="0">
<video width="800" height="600" controls autoplay>
<source src="electric_bulb_hd_stock_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
In impress.js, the DOM prevent video to autoplay, but you can use API, like this:
var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
video.pause();
}, false);
HTML:
<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
<video id="video" width="420" height="340" autoplay>
<source src="video/test.webm" type="video/webm">
</video>
</div>
With the code above, when you enter this step, the video will play automatically, and it will pause when you leave this step. Give it a try :)
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
It should work.
Initially the poster is visible before video call start after video call ends i am able to see a black background in place of poster in video container.
below is the html tag that i have used for this purpose.
<div id="videoSmall">
<video id="videoInput" autoplay width="240px" height="180px" poster="img/webrtc.png"></video>
</div>
i have tried to reset "videoInput" div with this code
var tag = $("#videoInput").clone();
$("#videoInput").replaceWith(tag);
This code works and brings poster image back but the issue with this is when i am performing video call again without refreshing the page .. the poster is not vanishing in order to show video .
You can do this by adding ended eventListener to the video element, and call the video load() again.
Here is a working example: CodePEN
HTML:
<video id="video" width="320" height="240" controls poster="http://www.w3schools.com/images/w3html5.gif">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
JavaScript / jQuery:
var video= $('#video')[0];
var videoNew= $('#video');
videoNew.on('ended',function(){
video.load();
});