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>
Related
My use case is simple as shown in this codepen for direct video tags
<section class="videowrapper videoTag">
<div class="gradient-overlay"></div>
<i class="fa fa-arrows-alt" aria-hidden="true"></i>
<video class="initial_video" loop="" controls="">
<source id="" src="https://d2cstorage-a.akamaihd.net/atl/Brunomars/Bruno-VersaceOnTheFloor.mp4" type="video/mp4">
</video>
</section>
The only difference is that I have a mix of direct video and iframe tags.
<div class="video-wrapper">
<iframe src="https://codepen.io/technotech/full/poRqdvN"></iframe>
</div>
i.e.
I have multiple iframes which have src URL as HTML/page (video are in this HTML/page). Once the page(containing multiple iframes and direct video tags) gets loaded, the user clicks on any one video(either direct video tag's video or iframe's video) to play and if it goes out of viewport then it should float.
if another video gets played while 1st one is floating, then 2nd video should replace 1st one on the float position if 2nd video goes out of the viewport
here is the codepen2 which I created for my use case. I tried the way used in the above codepen for direct video tags but it's not working for iframe HTML src videos as it's not able to inject events and id to those videos I guess.
please excuse me if I missed something.
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>
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>
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();
});
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.