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)
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.
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>
Whever I set
s.loop = true
or with onended event :
s.onended = function()
{
this.currentTime = 0 ;
this.play();
};
it loops a few seconds before the end of the track....
Did anybody here experienced this problem before and found how to fix it ?
(Yes I know webaudio is way better, but it takes ages to decode files on mobiles, so I use it only for short sounds and have to use the nasty old audio element for music.)
If you want to always repeat the audio, and it does not work through Javascript, you can use loop tag in HTML
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
I test your code and play complete sound, then repeat the sound
<audio id="Audio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<script>
var s = document.getElementById("Audio");
s.loop = true;
</script>
<script>
var s = document.getElementById("Audio");
s.onended = function(){
this.currentTime = 0 ;
this.play();
}
</script>
As the title suggests, I have audio playing automatically in my site, and some visitors have recommended that I create a pause button for it. After trying numerous online javascript based solutions, I have come out with no success. I use the following code for the audio to play:
<audio id= "song" autoplay loop onloadeddata="setHalfVolume()">
<source src="song.mp3" type="audio/mpeg">
</audio>
Add controls to tag <audio>
example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML:
<audio controls="controls">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> element.
</audio>
Source:/
https://www.w3schools.com/html/html5_audio.asp
https://developer.mozilla.org/en/docs/Web/HTML/Element/audio
Jquery;
$(function(){
$('audio').click(function() {
if (this.paused !== false) {
this.play();
} else {
this.pause();
}
});
});
Html
<!-- add a button to control the audio -->
<button id="btn">Pause</button>
Js
var btn = document.querySelector('#btn'),
songAudio = document.querySelector('#song');
btn.addEventListener('click', function () {
if (songAudio.paused) { // toggle the audio and button
songAudio.play();
btn.textContent = 'Pause';
} else {
songAudio.pause();
btn.textContent = 'Play';
}
}, false);
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.