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
Related
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>
I have a folder with 5 videos. I want to write a program in HTML/AngularJS to dynamically call the videos from the folder without having to mention the videos in a list.
<video id="myvideo" width="320" height="240" controls style="background:black">
<source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4" />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#myvideo source.active");
var nextsource = document.querySelector("#myvideo source.active +
source") || document.querySelector("#myvideo source:first-child");
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
myvid.src = nextsource.src;
myvid.play();
});
This code works if I explicitly mention the videos in the list in the program itself. But I don't want to do that.
Any way around this? Thanks in advance.
I feel, you want to achieve this by following way:
const videoSrcList = [
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/movie.mp4",
...
];
var nextIndex = 1;
var myvid = document.getElementById('myvideo');
myvid.addEventListener('ended', function(e) {
var activesource = myvid.querySelector("source");
activesource.src = videoSrcList[nextIndex];
myvid.play();
});
<video id="myvideo" width="320" height="240" controls style="background:black">
<source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4" />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
I use the following code to check if the user is on desktop or mobile, if on desktop the src="" attribute of the video sources is populated. All fine. After populating the src attribute, I want to check the video has loaded before displaying it. Is there a way to do this?
Thanks!
JS
//video
if($.browser.mobile)
{
console.log("is mobile")
// it is mobile browser
}
else
{
console.log("is desktop")
// no mobile browser
var sources = document.querySelectorAll('video#patient-video source');
// Define the video object this source is contained inside
var video = document.querySelector('video#patient-video');
for(var i = 0; i<sources.length;i++) {
sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();
video.muted= "muted";
$(".main-area--cris-pro").addClass("loaded")
}
To check if it's a mobile browser, I use the plugin:
detectmobilebrowser.js
My HTML is as follows:
<video id="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop>
<source data-src="../../assets/video/patient-home-video-comp.mp4" src="" type="video/mp4">
<source data-src="../../assets/video/patient-home-video-comp.webm" src="" type="video/webm">
<source data-src="../../assets/video/patient-home-video-comp.ogv" src="" type="video/ogg">
</video>
Use canplaythrough event.
The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
var sources = document.querySelectorAll('video#patient-video source');
var video = document.querySelector('video#patient-video');
for (var i = 0; i < sources.length; i++) {
sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
video.muted = true;//Set boolean value
video.addEventListener('canplaythrough', function() {
alert('Video Loaded!');
video.muted = false;
$(".main-area--cris-pro").addClass("loaded");
});
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
I have a 5 video's and video player with 5 different buttons.
When I click on any one of the buttons it loads the video, but if I want to watch a different one I have to reload the page and click on one.
How can I fix it so that you can click on any video button at any time and still make the videos work. I think I need to make a mouse down statement, if so how would I go about writing one. Here is my html and JavaScript:
Html
<video id="myVideo" controls autoplay></video>
<div>
Demo Reel
Video1
Video2
Video3
Video4
</div>
JavaScript
var myVid = document.getElementById('myVideo');
var myVidContents1 = "<source src='video/demoreel.mp4' type='video/mp4'/> <source src='video/demoreel.webm' type='video/webm'/> <source src='video/demoreel.ogv' type='video/ogg'/>";
function addVideo1() {
myVid.innerHTML = myVidContents1;
}
var myVidContents2 = "<source src='video/video1.mp4' type='video/mp4'/> <source src='video/video1.webm' type='video/webm'/> <source src='video/video1.ogv' type='video/ogg'/>";
function addVideo2() {
myVid.innerHTML = myVidContents2;
}
var myVidContents3 = "<source src='video/video2.mp4' type='video/mp4'/> <source src='video/video2.webm' type='video/webm'/> <source src='video/video2.ogv' type='video/ogg'/>";
function addVideo3() {
myVid.innerHTML = myVidContents3;
}
var myVidContents4 = "<source src='video/video3.mp4' type='video/mp4'/> <source src='video/video3.webm' type='video/webm'/> <source src='video/video3.ogv' type='video/ogg'/>";
function addVideo4() {
myVid.innerHTML = myVidContents4;
}
var myVidContents5 = "<source src='video/video4.mp4' type='video/mp4'/> <source src='video/video4.webm' type='video/webm'/> <source src='video/video4.ogv' type='video/ogg'/>";
function addVideo5() {
myVid.innerHTML = myVidContents5;
}
Try this:
function addVideo1() {
myVid.innerHTML = myVidContents1;
return false;
//This over-rides the default link behaviour,
// so the browser doesn't scroll to the top of the page instead of firing your code
}
After you create the new source tags, you need to force the video element to load the new sources, like so:
myVid.load();
See:
trying to add a multi source video player with more then one video?
Your click handlers should work just fine, but there may be some strange UX side effects. You're probably better off using a tag other than "a", such as "span" or "button", and then you can set the click handler in javascript:
document.getElementById('link1').addEventListener('click', addVideo1, false);
// etc...
Don't leave off that third "false" argument, otherwise your code will break in older versions of Firefox.