I have an audio file in the header:
<audio controls autoplay>
<source src="###" type="audio/ogg" />
<source src="###" type="audio/mpeg" />
</audio>
This is inside a DIV that is visible for desktop and tablets, but hidden on mobile. Apparently, this div loads even though I set it to display none and audio plays on mobile regardless the player not being visible. How do I make sure the audio doesnt start to play while the div is hidden and on desktop that the same div shows, the audio continues to play?
Calling the pause function when the div is hidden should do the trick.
var wrapper = document.querySelector('#yourdiv');
var styles = window.getComputedStyle(wrapper);
if(styles.getPropertyValue('visibility') === 'hidden') {
console.log('pausing');
wrapper.querySelector('audio').pause();
}
#yourdiv {
visibility: hidden;
}
<div id='yourdiv'>
hidden
<audio></audio>
</div>
Related
$('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');
});
I display a video on my web page with the following:
<div class="gl-bot-left">
<video controls="">
<source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4"
type="video/mp4">Your browserdoes not support the video tag.
</video>
</div>
This works fine on the desktop. The video loads and you can see a image of the start. However, on the iphone I get an image of the play button instead of an actual image. When I press it the video starts. Is there a way we can display a image for the video when it's first loaded?
The HTML <video> object has a specific attribute for your use-case: poster. It specifies an image to be shown while playback of your video didn't start yet.
<div class="gl-bot-left">
<video controls="" poster="https://picsum.photos/id/1/200/300">
<source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4"
type="video/mp4">Your browserdoes not support the video tag.
</video>
</div>
Edit
I really can't tell you why it ain't working on your iOs device but I can offer a nifty workaround.
add a HTML <image> with your desired placeholder image right before the <video> tag and group those two inside a <div>.
make the image invisible by setting it's visibility to hidden
create an empty 64x64x (or smaller) empty transparent .png and use it as the poster image for the video element. This will make sure it doesn't display the video's first frame.
finally listen for the loadedMetaData event and inside it's callback function resize the image to the dimensions of the video and set the image's opacity to visible
var video = document.querySelector('video');
function metaDataLoaded() {
var image = document.querySelector('img');
image.width = video.videoWidth;
image.height = video.videoHeight;
image.style.visibility = "visible";
}
.container img {
position: absolute;
visibility: hidden;
}
video {
position: absolute;
}
<div class="gl-bot-left">
<div class="container">
<img src="https://picsum.photos/id/2/300/200">
<video controls="" poster="https://i.imgur.com/A9WPATe.png" onloadedmetadata="metaDataLoaded()">
<source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4"
type="video/mp4">Your browserdoes not support the video tag.
</video>
</div>
</div>
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 a video is displaying only when i hover a button and so i want to optimize the loading of my page by uploading this video only when i hover my button, how can i set it ?
$('#iso-fire').mouseover(function(){
$('#bgvid2').show();
});
$('#iso-fire').mouseout(function(){
$('#bgvid2').hide();
video#bgvid2 {
display:none;
}
<div class="circle"></div>
<video autoplay loop id="bgvid2">
<source src="video/fire.mov" type="video/mp4">
</video>
I currently have an HTML5 Video in the body of a page with custom controls. One of these custom controls is a POP-OUT button, that lets the user pop the video out into a resizable JQuery modal dialog window. To enable all of the custom controls, I have an external javascript that loads in all the elements and eventHandlers and functions to make the custom controls work.
Is there a way to simply duplicate the video, into the dialog window, on the fly, and not be forced to recreate all of the custom controls code for this "new" video?
I'm hoping not to have functions like playPause() AND playPauseModal(), but the technology would be smart enough to just use playPause() for both.
I am currently using jquery-ui to launch the modal dialog window.
You can detach the parent from DOM then reinsert it into the modal dialog - it doesn't duplicate the video, but you can always use a placeholder in the background while in modal, and when closing modal window move it back.
A simple example:
var hasMoved = false;
$("#move").on("click", function() {
var parent = $("#parent");
var player = $("#player"); // get reference to add and to keep alive
if (hasMoved) {
$("#modal").remove("#player"); // remove from modal container
parent.append(player);
$("#video")[0].play(); // video will stop, continue to play
hasMoved = false;
}
else {
parent.remove("#player"); // remove player container and all controls inside
$("#modal").append(player); // append to new container
$("#video")[0].play(); // video will stop, continue to play
hasMoved = true;
}
});
#parent {border:1px solid blue}
#modal {border:1px solid red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="player">
<video id="video" width="500" height="280" preload="auto" autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
<button>Play</button><button>Stop</button>
</div>
</div>
<button id="move">Move --></button>
<div id="modal"></div>