I'm trying get the video in my post's body being autoplayed when the post is opened.
This is what it currerntly looks like:
<video class="wp-video-shortcode" id="video-611-1_html5" width="1080" height="1920" preload="metadata" src="https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4?_=1" style="width: 500px; height: 888.889px;"><source type="video/mp4" src="https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4?_=1">https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4</video>
I tried adding the autoplay using the following:
<script>
(function($) {
$(document).ready(function() {
$(".wp-video-shortcode").prop('loop', 'loop');
$(".wp-video-shortcode").prop('muted', true);
$('.wp-video-shortcode').prop('autoplay', true);
});
})(jQuery);
</script>
But it doesnt do anything. What am I doing wrong?
here's a post example where the video should autoplay.
https://jetminister.epic-cars.be/richard-branson/
Thank you
Thank
You need these attributes to get mute autoplay video : onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop
<video width="320" height="240" onloadedmetadata="this.muted = true" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Read this:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Autoplay only works if you use the mute attrib.
Related
I am running a JS script to add a secondary mute/unmute button to full screen HTML5 videos in a vertical carousel. They autoplay when in the viewport (via JS) but mute/unmute has to be a user interaction per iOS standards, etc. I have pieced together a script that work with only the first video, since they all have the id="video", but I cannot figure out how to make this work for multiple videos.
This is the code:
var vid, mutebtn2;
function intializePlayer(){
// Set object references
vid = document.getElementById("video");
mutebtn2 = document.getElementById("mutebtn2");
// Add event listeners
mutebtn2.addEventListener("click",vidmute2,false);
}
window.onload = intializePlayer;
function vidmute2(){
if(vid.muted){
vid.muted = false;
mutebtn2.innerHTML = "Mute";
} else {
vid.muted = true;
mutebtn2.innerHTML = "Unmute";
}
}
<div class="swiper-slide full-video">
<video id="video" loop muted playsinline>
<source src="video1.mp4" type="video/mp4">
</video>
<button id="mutebtn2">Mute</button>
</div>
<div class="swiper-slide full-video">
<video id="video" loop muted playsinline>
<source src="video2.mp4" type="video/mp4">
</video>
<button id="mutebtn2">Mute</button>
</div>
<div class="swiper-slide full-video">
<video id="video" loop muted playsinline>
<source src="video3.mp4" type="video/mp4">
</video>
<button id="mutebtn2">Mute</button>
</div>
The button work for the first video but no video after that. How would I apply this to every video element on a page?
I am creating a page having a video in background with HTML5.
I want to play the video after it buffered 70%. So that once the user play the video the video should not buffered.
Any one have a solution for this ?
Here is my code for video:
<div class="container">
<video id="video" poster="data:image/gif,AAAA" width="64" height="64" autoplay loop muted="muted" volume="0">
<source src="video/video1.mp4" type="video/mp4">
<source src="video/video1.ogv" type="video/ogv">
<source src="video/video1.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
I have tried some java script also
<button onclick="myFunction()" id="myButtonId" type="button">Get first buffered range</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function myFunction() {
alert("Start: " + vid.buffered.start(0) + " End: " + vid.buffered.end(0));
document.getElementById("myButtonId").click();
if(vid.buffered.end(0)>40){
vid.autoplay = true;
vid.load();
}
}
</script>
Thanks in advance !!!!
I have multiple video tags in single screen with absolute position and want to get that longer video from multiple and when longer video ends want to execute code.
<div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
<video preload="auto" autoplay>
<source src="1.mp4" type="video/mp4">
<source src="1.ogv" type="video/ogg">
</video>
</div>
<div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
<video preload="auto" autoplay>
<source src="2.mp4" type="video/mp4">
<source src="2.ogv" type="video/ogg">
</video>
</div>
<div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
<video preload="auto" autoplay>
<source src="3.mp4" type="video/mp4">
<source src="3.ogv" type="video/ogg">
</video>
</div>
How can i do it?
Thanks,
Bhumi
So, if I understand it well, you have multiple videos on one page, and when the longest one ends playing, you want to execute code?
Then you'd do this:
$(document).ready(function() {
var longestVid = "";
$("video").each(function() {
if (longestVid == "" || longestVid.duration < this.duration)
longestVid = this;
});
//To loop all others:
$("video").not($(longestVid)).attr("loop","loop");
$(longestVid).on("ended",function() {
//This code will execute when the longest video on the page ends playing.
});
});
I am trying to change / remove my video which is in my start.html
<video id="video" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0">
<source
src="clip0012.mp4" type="video/mp4">
</video>
I am calling this :
Element elem = DOM.getElementById("video_background");
elem.getFirstChildElement().removeAttribute("src");
elem.getFirstChildElement().setAttribute("src", "clip0022.mp4");
i get no error etc. the video clip0012 is still shown , but why?
Try this one (See comments for more information in code):
java:
//Get old Video Element
Element oldVideoElement=RootPanel.get("video").getElement();
//Create a new Video Element
VideoElement newVideoElement=Document.get().createVideoElement();
newVideoElement.setId("video");
newVideoElement.setPreload("auto");
newVideoElement.setAttribute("autoplay","true");
newVideoElement.setAttribute("loop","loop");
newVideoElement.setAttribute("muted","muted");
newVideoElement.setAttribute("volume","0");
//Create a new Source Element
SourceElement sourceElement = Document.get().createSourceElement();
sourceElement.setSrc("movie.mp4");
sourceElement.setType("video/mp4");
//Append new source Element in new video Element
newVideoElement.appendChild(sourceElement);
//Append new video element in video div
RootPanel.get("videoDiv").getElement().appendChild(newVideoElement);
//remove old video element from its parent
oldVideoElement.removeFromParent();
html:
<div id="videoDiv">
<video id="video" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0">
<source src="clip0012.mp4" type="video/mp4">
</video>
</div>
Use this instead:
DOM.getElementById("video").setAttribute("src", "clip0022.mp4");
I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely before trying to play to prevent it from stuttering as much. Here is my current code:
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/backgroundvideo.mp4" type="video/mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
</video>
Any help is greatly appreciated!!
This is a working solution for me. You should use canplay as a best practice to be sure the browser can play the video. Also, here is a straight javascript solution.
Note: I removed autoplay, an extra closing video tag, and formatted your muted & loop flags.
var video = document.getElementById("video_background");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="video_background" poster="images/dmm_background.jpg" controls="controls" preload="true" muted loop>
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/SsRadVyPGjdkeg9tt/videoblocks-computer-hacking-in-process-cyber-security-concept_h-l3zbu4xb__PM.mp4">
<source src="videos/backgroundvideo.webm" type="video/webm">
</video>
That would be better to remove autoplay attribute from video tag and add it when you actually need it (meaning in 5 seconds). And if you are willing to preload video, then you should use preload="auto" (not preload="true"), it will load completely while loading a page.
const startVideo = async () => {
const video = document.querySelector('#video_background');
try {
await video.play();
video.setAttribute('autoplay', true);
console.log('video started playing successfully');
} catch (err) {
console.log(err, 'video play error');
// do stuff in case your video is unavailable to play/autoplay
}
}
setTimeout(startVideo, 5000)