I have 8 videos on a page. on each video element i have add some things like sound control and description.
Specifically, the sound control mutes and umutes the video on click and also changes its icon accordingly. Hoever, when the video goes full screen, the browser uses its own controls for sound. So, for example if a user watches a video on mute, then goes full screen, and then turns on sound, and then exits full screen, the sound is still on but the sound control suggests it is not.
So i'd like to run a function every time any video on the page exits full screen, to update the sound icon.
Here's my html for the video element. I have 8 identical video elements on the page:
<div class="section-element video-mockup" onmouseenter="hoverIn($(this))" onmouseleave="hoverOut($(this))">
<video loop muted playsinline preload="metadata" class="video-onhover" controlsList="nodownload" onclick="clickPlay($(this))" ondblclick="toggleFullscreen(this)">
<source src="/wp-content/uploads/wysiwyg/webm/Video.webm" type="video/webm">
<source src="/wp-content/uploads/wysiwyg/webm/Video.mp4" type="video/mp4">
</video>
<div class="section-inner video-overlay">
<hr class="whiteLine">
<div class="videoControls">
<div class="overlay-columns description">
<p class="overlay-text"></p>
</div>
<div class="overlay-columns buttons">
<button class="videoButtons sound-button" title="Sound" onclick="toggleSound(this);"><ion-icon name="volume-off"></ion-icon></button>
<button class="videoButtons reset-button" title="Restart" onclick="expandVideo(this);"><ion-icon name="expand"></ion-icon></button>
</div>
</div>
</div>
</div>
So I am trying to update the <button class="videoButtons sound-button" title="Sound" onclick="toggleSound(this);"> on any video that exits fullscreen.
Here's my code for that:
$('video.video-onhover').on('fullscreenchange', function($this) {
var thisVideo = $this.target;
console.log(thisVideo);
var soundButton = thisVideo.parentElement.querySelector('button.sound-button');
if (thisVideo.muted) {
soundButton.innerHTML = '<ion-icon name="volume-off"></ion-icon>';
} else {
soundButton.innerHTML = '<ion-icon name="volume-high"></ion-icon>';
}
});
I added the console.log to see if the function is being called, but it doesn't seem to run. i am guessing there is something wrong with the fullscreenchange event but i can't find any other way. Any ideas?
Related
I have multiple buttons and each button corresponds to a different video being played on the screen.
HTML:
<div class="video-container">
<video autoplay muted loop controls></video>
</div>
JS:
game.addEventListener('click', () => {
videoSource.setAttribute('src', `./assets/videos/${game.id}.mp4`);
});
The problem is if I have already downloaded the first video, when I click on button1 again the video is re-downloaded.
How do I implement caching here?
<div>
<img id="startOrStopImg1" class="audioimage" src="short images/cdd.png" alt="চালু করুন">
<audio id="audio" src="short images/riya.mp3" type="audio/mp3" controls>Your browser does not support the audio element
</audio>
</div>
This just play and stop but cannot change image.
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>
I have 2 links for videos coded in <div>. I need a help by code to let the second video play automatically after the first video has ended.
I am using CSS and HTML5.
This is the code:
<div class="container2">
<video controls src="System Software & Application Software.mp4" autoplay></video>
</div>
<div class="container3">
<video controls src="What is Computer Hardware.mp4"autoplay> </video>
</div>
You need to remove the autoplay from the second video, then create an eventListener on your first video to listen for the ended event and then trigger the second video to play. For instance, with this HTML:
<div class="container2">
<video id="video1" controls src="System Software & Application Software.mp4" autoplay> </video>
</div>
<div class="container3">
<video id="video2" controls src="What is Computer Hardware.mp4"> </video>
</div>
Your JavaScript could look something like this:
document.getElementById('video1').addEventListener('ended',function() {
document.getElementById('video2').play();
},false);
I'm currently working on a page for playing different videos when you click an element. While it works beautifully on the computer, of iOS devices it does not. The problem is that when the element, in this case a button, is clicked, it shows the video but does not start playing, as it should. The script is
$(document).ready(function(){
$('#video_1, #video_2').hide();
$('.icon_1').click(function(){
$('#video_2').fadeOut(function(){
$('#video_1').fadeIn();
});
});
$('.icon_2').click(function(){
$('#video_1').fadeOut(function(){
$('#video_2').fadeIn();
});
});
$('.icon_1').click(function(){
$('.video_2').get(0).pause();
$('.video_2').get(0).currentTime = 0;
$('.video_1').get(0).play();
});
$('.icon_2').click(function(){
$('.video_1').get(0).pause();
$('.video_1').get(0).currentTime = 0;
$('.video_2').get(0).play();
});
});
and the html is
<button><div class="icon_1" id="mediaplayer" onclick="play">cadillac</div></button>
<button><div class="icon_2" id="mediaplayer2" onclick="play">nike</div></button>
<div id="video_1">
<video class="video_1" width="50%" height="50%" controls poster="http://www.birds.com/wp-content/uploads/home/bird.jpg" >
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
</video>
</div>
<div id="video_2">
<video class="video_2" width="50%" height="50%" controls poster="images/BKG_JohnGT.png">
<source src="images/01.mp4" type="video/mp4" />
</video>
</div>
It anyone could give me a function that could mak this happen, tht would be great
iOS does not support more than one video element in a page at one time. It doesn't even give you an error message - it will merely display the poster image (or first frame) and then fail to play, just as you describe.
Unfortunately, you can't do a true cross-fade, but you can come close. Start with only one video element attached to the DOM. When switching from one video to another, you can fade the current video out, and then when it's done, remove it and add the second video. Apple has provided some details and code samples on how to do this.
In theory, you should be able to grab a snapshot of the video frame in a canvas and swap that in for the video and fade the canvas out, but iOS doesn't support capturing video frames in a canvas either.
These and some other non-standard behaviors are described well in this article.