Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm trying to have a <video> autoplay on page load then pause 6 seconds into the video and stay like that.
I have the video playing fine, I'm just having a hard time with JavaScript to make the video pause automatically after 6 seconds of the DOM time.Anyone have code for how to do so?
You will have to use the onload event to do that here is an exemple:
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<h1>Hello World!</h1>
<script>
const video = document.getElementById('myVideo');
video.onplay = function() {
window.setTimeout(()=>{
const video = document.getElementById('myVideo');
video.pause()
}, 6000)//6000ms = 6sec
}
</script>
</body>
</html>
Here you go, once the video is started the interval keeps firing that function which verify if the current time of the video is higher or equal to 6seconds and then does what you need.
;(function(){
if( !video ) return;
var videoInterval = null;
video.onplay = function() {
videoInterval = setInterval(_ => {
if( video.currentTime >= 6 /* 6 seconds */ ) video.pause();
else console.log( video.currentTime );
}, 1);
}
video.onpause = function() {
clearInterval(videoInterval);
videoInterval = null;
}
video.onend = video.onpause;
}());
<!DOCTYPE html>
<html>
<body>
<video id="video" muted controls autoplay>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Related
My goal is to have a video slideshow that auto repeats as well as starts automatically. Unfortunately it seems that the video only sometimes autoplays: from my experiments it is likely that the video autoplays when reloading the page if it is already loaded, as well as if the page is navigated to from another part of the site. As this video is meant to be running on my home page this isn't really an option. This may be a browser related issue as I don't think there are any bugs that could cause this, I am using the latest version of chrome.
var videos = ["6", "5", "3", "8", "7", "2"];
function nextVideo() {
var current = videoSource.getAttribute("src");
current = current.slice(9, -4);
var position = videos.indexOf(current);
var newPos;
if (position == videos.length - 1) {
newPos = videos[0];
} else {
newPos = videos[position + 1];
}
videoSource.setAttribute("src", "videos/No" + newPos + ".mp4");
videoId.currentTime = 0;
videoId.load();
videoId.play();
}
<video autoplay id="videoId" onended="nextVideo()">
<source src="videos/No6.mp4" id="videoSrc">
</video>
<video width="320" height="240" controls autoplay>
<source src="your_video_name.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
You can see mozilla developer video link for better reference.
Sound should be muted for some browsers who only autoplay when muted:
<video autoplay muted id="videoId" onended="nextVideo()">
<source src="https://app.coverr.co/s3/mp4/Mock-up.mp4" id="videoSrc">
</video>
Here is a codepen: https://codepen.io/brooksrelyt/pen/WPrMrG
this is my video:
<video id="video1" autoplay="true" muted="true">
<source src="videos/test.mp4v" type="video/mp4">
</video>
If I removed the muted attribute, there is no sound! I don't know why. BUT what I want t achieve is when i press a button I want to unmuted my video.
This is my js code:
$(".play-pause").click(function(){
$("#video1").prop("volume", 0.5);
$("#video1").prop("muted", false);
});
So, first question why my video is muted by default ?
Second question how do I unmuted my video when i press a button ?
Thx a lot !
use this code
$(document).ready(function(){
$("#play-pause").click( function (){
if( $("#video1").prop('muted') )
{
$("#video1").prop('muted', false);
$("#video1").prop("volume", 0.5);
}
else {
$("#video1").prop('muted', true);
}
});});
To avoid the mute by default, just erase the "muted" attribute from the video tag.
To set the volume, put this inside your function:
var vid1 = $("video");
vid1.volume = 0.5;
I have a problem to get out the duration of an mp4 video file when the html document is ready. My code:
(function ($, root, undefined) {
$(function () {
'use strict';
$(document).ready(function() {
var duration = $("section:first-child() video").get(0).duration;
alert(duration);
});
});
});
The script works in firefox but in chrome it returns an NaN. Im not a javascript professional and i use wordpress HTML5 Blank theme.
Thanks for your help and best regards.
You need to preload the video metadata for you to be able to access them. Then, within the loadedmetadata event, you may access the duration as below.
$(function() {
var $video = $('#video_container').find('video');
$video.on("loadedmetadata", function() {
$('#duration').text($video[0].duration);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video_container">
<video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="metadata" controls="" width="400">
<source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
<source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
<source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
<div>Total duration : <span id="duration"></span></div>
you need a listener to get the duration of a video
var videoTime = 0;
var currentvideo = document.getElementById('video');
currentvideo.addEventListener('play', function() {
videoTime= currentvideo.duration;
console.info(videoTime) // get the duration
});
I saw some examples of defaultPlaybackRate and they say it work on Chrome. So I use their example codes and run on Chrome, it doesn't change the speed to 3.0x when I click the button. Anyone can tell me why?
Here my javascript code,
$(document).ready(function(){
var video = document.getElementById('video');
$("#speed").click(function() { // button function for 3x fast speed
video.defaultPlaybackRate=3.0;
});
});
The HTML codes,
<button id="speed" type="button">3.0x</button>
and
<video id="video" width="930" height="500" controls>
<source src="caption.mp4" type="video/mp4">
<source src="caption.ogg" type="video/ogg" >
<source src="caption.webm" type="video/webm" >
</video>
Because once you change the defaultPlaybackRate you have to load the video again using video.load(); (or set it before the video has loaded). If you want to change the rate while the video plays, use playbackRate instead.
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.defaultPlaybackRate = 3.0;
video.load();
});
or
var video = document.getElementById('video');
$("#speed").click(function () { // button function for 3x fast speed
video.playbackRate = 3.0;
});
jsFiddle example
Can I make a countdown to the end of the HTML5 video?
<video id="video" width="400" height="225" preload="auto">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
<div id="countdown">Video ends after <span>XX</span> seconds.</div>
I understand that a have to wait for the video load, and then if the video is loaded, need to know the length and run video and coundown.
Listen to the timeupdate event fired by the video object and update the time remaining.
Something like this should work:
var video = document.getElementById('video');
video.addEventListener('timeupdate', updateCountdown);
function updateCountdown() {
var timeSpan = document.querySelector('#countdown span');
timeSpan.innerText = video.duration - video.currentTime;
}
This should do the trick for you
countdown = video.duration - video.currentTime
See here for more details