JQuery video controller - problem targeting relevant videos - javascript

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>

Related

Play Video by trigger('play') for 1

$('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');
});

How can I remove this shadow-root custom button from an HTML video?

I have used a slide show on my web site. There are a couple of images and a video. I have not enabled any shadow elements or controls for this video, however there is a custom button to open it externally and I cannot disable it in any ways.
I have tried different JS scripts to attach a shadow and set the mode on closed, but I get the error that this video element cannot have an attached shadow.
Here's the button I am talking about
An example script that I have used:
function makeShadowTree(shadowClose) {
var root = shadowClose.attachShadow({mode: 'closed'});
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.slides--i').forEach(makeShadowTree);
});
<div class="slides">
<div class="slides--i" id="slide--1"></div>
<div class="slides--i" id="slide--2"></div>
<video autoplay muted loop class="slides--i" id="slide--video">
<source src="img/slides/slide-03-video.mp4" type="video/mp4">
</video>
</div>

How do I set an event listener for when a MediaElement.js video has ended, without having the video id?

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.

Issue with video tag . poster is not visible after video call ends

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();
});

How to set currentTime in popcorn.js when a link is clicked?

What I am trying to do is to get popcorn.js to jump to a point in the video when a link is clicked. I tried using the below function, currentTime() but am unable to add the on click button to trigger the function.
http://popcornjs.org/popcorn-docs/media-methods/#currentTime
For the html side this is what I have.
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"> </source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"> </source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
<div id="footnotediv"></div>
<p id="click">Click me.</p>
This is what I have tried for the .js side
// create a popcorn instance
var $pop = Popcorn("#video");
// on click , switch the time back to 3 second
$pop.exec( document.getElementById("click").onclick, function() {
this.currentTime( 3 );
});
// play the video
$pop.play();
Can anyone help me point to what am I doing wrong? I am still trying to find my feet with this.
I think this is a syntax problem try this:
// create a popcorn instance
var $pop = Popcorn("#video");
// on click , switch the time back to 3 second
$pop.exec( document.getElementById("click").onclick, function() {
$pop.currentTime = 3;
});
// play the video
$pop.play();

Categories