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();
}
});
Related
I'm working on a page that, on my client's request, loads playing a background soundtrack.
Of course it's just for those users who are not navigating with audio autoplay disabled.
So the simple piece of code used to start playing the music is something like the following:
<audio autoplay id="background-soundtrack">
<source src="mytrack.mp3" type="audio/mpeg">
</audio>
I'd like to make music stop (even better: make it fade out in a matter of a few seconds) as soon as the user clicks anywhere on the page -- it should work tapping on mobile devices too.
Can you please suggesitng me a smart way to achieve my goal?
It doesn't matter if it's pure JavaScript or jQuery.
Thanks!
try this jquery:
$('document').on('click','body',function(){
if ($('#background-soundtrack').paused == false){
$('#background-soundtrack').animate({volume: 0}, 1500,
//1500 duration time
function(){
$('#background-soundtrack').pause()
});
}
});
The HTML5 audio elements has the pause method, that you can use at "onClick" (work in touch too) event on body, document, window...
Like this (I delete the "-" in id):
document.onclick = function(e){
backgroundsoundtrack.pause();
}
<audio autoplay id="backgroundsoundtrack">
<source src="mytrack.mp3" type="audio/mpeg">
</audio>
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
I am using video.js, here is my DEMO
<video class="video-js vjs-default-skin" src="http://vjs.zencdn.net/v/oceans.mp4" controls="true" preload="yes" poster="http://www.videojs.com/img/poster.jpg" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
When I click on play button video starts to play, it is ok works how it should, but when I scroll down without pausing the video, it still plays. I want to add some script which will do this - onscroll it will autostart video and I will see the first look with poster image.
Also I have one button (named "Scroll to video section") which is under video section, when you click on button it scroll to the video section but it must show video's first look as well - paused and with poster image. I was wondering how can I do this.
Please find this JsFiddle which has the behaviours you appear to require.
The function below was added to pause the video when any scrolling occurs.
jQuery(document).scroll(function () {
jQuery(".video-js")[0].player.pause();
});
You can change the function called to .play(); if you want the video to play on scrolling.
Please refer to this discussion thread to understand the functions that make the video play and pause.
The code above has been changed to the 3rd code snippet listed below to allow additional functionality.
The function below plays the video 3000ms (3 seconds) after the "Show Video Section" button is clicked.
setTimeout(function () {
jQuery(".video-js")[0].player.play();
}, 3000);
The code below resets the video to show the "poster". The current time is stored in order to allow the video to restart from where the user left off.
Please refer to this Stackoverflow question for more details.
jQuery(document).scroll(function () {
var time = jQuery(".video-js")[0].player.currentTime();
jQuery(".video-js")[0].player.pause().currentTime(time).trigger('loadstart');
});
The code below was used to change the Js Fiddle to start the video at the beginning on the scroll event.
jQuery(".video-js")[0].player.pause().currentTime(0).trigger('loadstart');
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. :)