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 !!!!
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.
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>
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 developing a HTML5 game for Facebook. I have the following HTML code:
<audio style="visibility: hidden;" controls="controls" id="sound-0">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-1">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-2">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-3">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-4">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
<audio style="visibility: hidden;" controls="controls" id="sound-5">
<source src="sound/sound_new.ogg" type="audio/ogg"/>
<source src="sound/sound_new.mp3" type="audio/mp3"/>
</audio>
And the following Javascript that starts the sounds:
if (this.hitFlag > 6) this.hitFlag = 1;
var soundElem = document.getElementById('sound-' + (this.soundFlag % 6) + '0' );
soundElem.play();
Each click of the mouse triggers a sound event. The problem is with Chrome where after dozen of clicks the sounds disappear or start playing with quite a big delay(a dozen of seconds).
But there is no problem when playing in FF or Opera.
It's definitely a bug, but I think it has to do with the actual element and not the sound playing portion. You can easily get around this by preloading your audio, instantiating a new audio object for each playing of a sound, then finally checking the sound objects at each tick to determine whether or not they've finished playing so you can clean up memory.
Preloading is, of course, something like:
var _mySnd = new Audio('my/snd/file/is/here.mp3');
Instantiating is like:
var _sndCollection = [];
var n = _sndCollection.length;
_sndCollection[n] = new Audio();
_sndCollection[n].src = _mySnd.src;
_sndCollection[n].play();
And the cleanup check would be:
for (var i = 0; i < _sndCollection.length; i++)
{
if (_sndCollection[i].currentTime >= _sndCollection[i].duration)
{
_sndCollection.splice(i, 1);
i--;
}
}
I use something like this in my own HTML5 game engine, and it's worked perfectly thus far.