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");
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'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.
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 use this to have a video player on browser
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Before clicking play, it display an image from the very beginning of the video, but in most of my video, first several seconds is black screen. Is it possible to make it get image at a specific time of the video, like "0:00:15", without creating thumbnail for the video?
I just want to add one more thing in this I guess you forgot to add preload="metadata" attribute in video tag like the below
<video preload="metadata" width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
and one more thing I want to add that this will not starts video after 15 seconds, this will only take an screenshot from video and make it as a first view of the video
Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )
<video width="320" height="240" controls id="video">
<source src="video.mp4" type="video/mp4">
</video>
$(document).ready(function() {
var time = 15;
var scale = 1;
var video_obj = null;
document.getElementById('video').addEventListener('loadedmetadata', function() {
this.currentTime = time;
video_obj = this;
}, false);
document.getElementById('video').addEventListener('loadeddata', function() {
var video = document.getElementById('video');
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL();
$('#thumbnail').append(img);
video_obj.currentTime = 0;
}, false);
});
Source 1
Source 2
Using the poster attribute is the easiest way to go. Getting a preview image of the video from a time other than the start is exactly what its designed for.
http://www.w3schools.com/tags/att_video_poster.asp
Trying to create a function to dynamically grab another segment of the video to use as the poster will undoubtedly create more latency and overhead for the client, negatively affecting the UX.
I did it this way:
It jumps to 0 if the currentTime is 15, but will go over the 15s mark when played
html:
<video id="video1" src="path/to/video#t=15" onplay="goToStart()" controls ></video>
javascript:
function goToStart(){
if (document.getElementById('video1').currentTime == 15){
document.getElementById('video1').currentTime = 0;
}
}
Add #t=15 to your video source, like below
<video width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
This will starts video after 15 seconds.