I know this question has been asked a number of times, and I've looked through every single one of them here on StackOverflow.
I'm simply trying to loop a 5 second MP4 video in an HTML5 player and have it be seamless. I've tried both jwplayer and video.js, both locally and on webspace, and neither do the trick. I've tried using the "ended" events; I've tried preloading/prebuffering; I've tried listening for the final second of a video and then seeking to the beginning to bypass the stop/play events entirely. I still always see jitter, and I still always see the loading icon (latest Chrome & Firefox).
For reference, here's some of my latest code for video.js:
<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
width="640" height="480"
data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
<source src="video/loop_me.mp4" type="video/mp4" />
</video>
<script type="text/javascript">
var myPlayer = videojs("loop_me");
videojs("loop_me").ready(function(){
this.on("timeupdate", function(){
var whereYouAt = myPlayer.currentTime();
if (whereYouAt > 4) {
myPlayer.currentTime(1);
}
});
});
</script>
Has anyone managed to do this successfully? And, if so, could you please post a complete solution? I don't normally ask for or want those, but I think it might be necessary this time.
Try this:
1) edit your video this way:
[1s][2s][3s][4s][5s]
cut 1st second block of the video and append it 2x to the end like this:
[2s][3s][4s][5s][1s][1s]
2) Use code:
<video id="vid" width="100" height="50" loop autoplay preload="true">
<source src="something.mp4" type="video/mp4">
</video>
<!-- Goes to end of body of course -->
<script>
var vid = document.getElementById("vid");
vid.addEventListener("timeupdate", function () {
if(this.currentTime >= 5.0) {
this.currentTime = 0.0;
}
});
</script>
The idea behind this is to make the video seamless (the end of the video is the beginning of the video). Also, you have to make sure the video never ends. The loop attribute works with smaller video files but you see a black image at the end of the video if too large (before the next looping iteration). Essentially before the video ends, you are seeking back to 0.0s.
I hope that helps.
Heureka!
We've found the actual, real, work-around-free solution to this problem over at where I work. It explains the inconsistent behavior through multiple developers as well.
The tl;dr version is: Bitrates. Who would've guessed? What I suppose is that many people use standard values for this that usually are around 10 Mbit/s for HD videos if you use the Adobe Media Encoder. This is not sufficient.
The correct value would be 18 Mbit/s or maybe even higher. 16 is still a bit janky.
I cannot express how well this works. I've, by now, tried the messiest workarounds for about five hours until I found this together with our video editor.
I hope this helps everyone and saves you tons of time!
Doozerman and Offbeatmammal are correct: no Javascript is required to loop video in HTML5.
About that pause before each iteration: in some browsers we, too, can observe a pause at the end of the loop in our tests. E.g., in the inline, 22-second demo video at...
http://www.externaldesign.com/Marlin-Ouverson.html
...under OS X, we see a ~0.5 sec. pause before the loop repeats -- only in Firefox and Safari; Chrome and Opera both play the loop without noticeable pause. But note: for desktop/laptop browsers, the above page provides an added full-screen background video that appears to loop without pause in all four of the above browsers.
You don't need any extra scripts for that kind of stuff.
The "video" tag has built in loop attribute, use this and your video will loop.
<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" controls autoplay loop>
<source src="video/loop_me.mp4" type="video/mp4" />
</video>
You can also add preload attribute if you wanted to. If you want, you can find more information about the video tag here: HTML video Tag
Edit: Oops. Didn't notice Offbeatmammals comment under your question. :)
Related
I have found only deprecated anwers so i need to ask how to make autoplay on chrome?
<audio autoplay loop controls src="./audio/menu.wav" data-start-screen-audio></audio>
let music = new Audio("./audio/menu.wav");
music.addEventListener("canplaythrough", function () {
music.play();
});
these two metods works on other browsers but on chrome not, how to fix that?
by default in modern browser, this is not allowed but if you add the muted attribute it will work fine
as they mention here in mdn
Note: Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control.
but in the case of media content you could run the play action from js
like this
<video src="" id="videoEl">
document.onload = function(){
document.getElementById('videoEL').play()
}
for more info check the autoplay guide
You may simply use (.autoplay = true;) as following (tested on Chrome Desktop):
<audio id="audioID" loop> <source src="path/audio.mp3" type="audio/mp3"></audio>
<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>
I have N number of videos, I play all video through video.js player framework.
I set videoPlayer width using javascript.
In width of first video set correctly on both portrait and landscape mode but next of videos does not set properly in landscape mode.
This is my player.html
<video id="cdnvideo" class="video-js fullscreen vjs-default-skin vjs-big-play-centered" controls preload="auto"
poster="{{video|videourlfilter}}" >
<source src="{{video|videourlfilter}}" type='video/mp4'>
<source src="{{video|videourlfilter}}"".mp4" type='video/mp4'>
</video>
My js
vidPlayer = videojs(document.getElementById('cdnvideo'))
vidPlayer.width(screen.width)
$(window).on("orientationchange", function (event) {
if(screen.width > screen.height){
vidPlayer.width(height)
}
else{
vidPlayer.width(width)
}
});
No, I was correct the first time...your JS does NOT parse correctly.
(I'd forgotten that the only JS code that gets parsed is the code that gets EXECUTED! Ergo, the event code doesn't get parsed on my Win-10 laptop...it
only parses when the mobile device actually gets rotated.)
So, your two conditional if and else 'sets' don't parse...i.e. the first one is getting:
"Uncaught ReferenceError: height is not defined"
You'll need to add 'screen.' to your args. e.g.
vidPlayer.width(screen.height)
Also I was miss-understanding what you meant when you said '...first video set' and '...but next of videos'. (I erroneously took those as references to 'groups/sets' of video files.)
Anyway, thanks for your question...I learned MUCH from playing with it.
I even got a refresher on JS 'templates' as I scanned https://www.joezimjs.com/javascript/javascript-templating-adding-html-the-right-way/ (I played with Angular for only a month or two, before I decided that it was overkill for my 'web-apps as a hobby' needs. The only thing I have to show for it, is a multi-item carousel...e.g. https://mdbootstrap.com/angular/advanced/carousel/ )
Cheers...
Thanks in advance for any help you're able to give. The issue I'm having is that the following code is in a javascript function when a button is clicked. The desired behavior is that on button click, a video fades in, plays for 10 seconds, and fades back out. Then when the button is clicked again, this behavior repeats.
Issue is, the second time the button is clicked, the video fades in but is already at the end of the video and then fades out after 10 seconds. Any idea why the vid.currentTime is not properly resetting the video?
var webm = document.getElementById('src');
webm.src = "src.webm";
var vid = document.getElementById('video');
vid.currentTime = 0;
vid.play();
vid.fadeToggle(1000);
setTimeout(function() {
vid.fadeToggle(1000);
}, 10000);
and this is where the video file is imported
<video id="video" width="100%" Style="Display:none">
<source id="src" src="src.webm" type="video/webm" />
</video>
Additional info has come to light. This only happens in Chrome, and doesn't happen even in Chrome when it's opened locally, only when the html page is served statically via express.
Try
vid.load(); instead of vid.currentTime = 0;
Maybe you can try to add autplay to the video attribute, but I think the video will start looping.
<video id="video" width="100%" Style="Display:none" autoplay>
OR you can add this function or javascript line to your button function.
vid.load();
source: http://www.w3schools.com/tags/av_met_load.asp
Figured out that this was only an issue in chrome and seems to have to do with this question:
can't seek html5 video or audio in chrome
Im using a video as a background on one page of a site that did autoplayed until I plugged in the Razorfish / Parallax-JS from https://github.com/razorfish/Parallax-JS/
I can still right click the background and see the play option but No matter what I do I cannot get the video to autoplay anymore. Someone asked a similar question on GitHub but no answer.
My Video tag opens like this...
<video id="video_background" preload="auto" muted="" volume="0" autoplay >
I have tried all the following and many different variations but no luck...
document.getElementById("video_background").setAttribute('autoplay', true);
$("#video_background")[0].load();
$("#video_background")[0].play();
$("#video_background").get(0).play();
$('#video_background').attr({'autoplay':'true'});
Every other part of the plugin is working so it would be great if I could find a solution.
Try this
<video id="video_background" autoplay loop muted preload="auto">
You can work your way around it, by detecting page change and tell HTML5 player to play, when desired page is reached.
$(window).on('hashchange',function(){
if(document.URL.indexOf("#intel") >= 0){
var v = document.getElementsByTagName("video")[0];
v.play();
}
});
I need HTML5 video to start at certain point. Let's say at time 50 seconds onward.
I tried but its not working as expected. is there something i am doing wrong?
Here is the code:
<video id="vid1" width="640" height="360">
<source src="file.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<script>
document.getElementById('vid1').currentTime = 50;
</script>
When the page loads, it just starts playing from beginning.
However if I call this during playback like after some time, it works fine.
Is there anything I am missing?
You have to wait until the browser knows the duration of the video before you can seek to a particular time. So, I think you want to wait for the 'loadedmetadata' event something like this:
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 50;
}, false);
WITHOUT USING JAVASCRIPT
Just add #t=[(start_time), (end_time)] to the end of your media URL. The only setback (if you want to see it that way) is you'll need to know how long your video is to indicate the end time.
Example:
<video>
<source src="splash.mp4#t=10,20" type="video/mp4">
</video>
Notes: Not supported in IE
You can link directly with Media Fragments URI, just change the filename to file.webm#t=50
Here's an example
This is pretty cool, you can do all sorts of things. But I don't know the current state of browser support.
adjust video start and end time when using the video tag in html5;
http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15
where left of comma is start time in seconds, right of comma is end time in seconds.
drop the comma and end time to effect the start time only.
On Safari Mac for an HLS source, I needed to use the loadeddata event instead of the metadata event.