We have video files in amazon-s3 and play them on html in the following format.
<video src="<URL>" autoplay/>
But I'm not satisfied with it, its nowhere near to how youtube does it.
What is the infrastructure required to stream and play video, where it can buffer and change video quality on the fly?
I'm sure the question is very basic and doesn't have much information.
Any help will be appreciated.
For Video Buffer You have to Use Java Script:
<button onclick="myFunction()" type="button">Buffer</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="html.mp4" type="video/mp4">
<source src="html.ogg" type="video/ogg">
</video>
<script>
var vid = document.getElementById("myVideo");
function myFunction() {
alert("Start: " + vid.buffered.start(0) + " End: " + vid.buffered.end(0));
}
</script>
Related
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 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)