my HTML5 video autoplay is not working.
<video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo">
I also tried without the ="true" value, and it doesn't work either. I've already used the same code in other sites and it worked just fine.
I'm using a framework based on fullPage.js, but i looked for something related on the files and didn't find anything.
The site is at http://agenciamilk.com/site/2/ if you wanna take a look. Thanks
You should use the afterRender callback the fullpage.js plugin offers.
afterRender()
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).
You can take a look at a live example here or you can even find it in the examples folder of the fullpage.js download.
And you can easily see the source code its using:
$(document).ready(function () {
$('#fullpage').fullpage({
verticalCentered: true,
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
afterRender: function () {
//playing the video
$('video').get(0).play();
}
});
});
UPDATE
This is no longer necessary in fullpage.js > 2.6.6.
It will automatically play the video when accessing the section as far as it has the tag autoplay in it:
<video autoplay loop muted controls="false" id="myVideo">
<source src="imgs/flowers.mp4" type="video/mp4">
<source src="imgs/flowers.webm" type="video/webm">
</video>
In case you only want to play it on section load (not on page load) use data-autoplay.
More info at the documentation.
Try autoplay="autoplay"
http://www.w3schools.com/tags/att_video_autoplay.asp
Mentions here in the "Differences Between HTML and XHTML" section.
Sorry I don't have enough rep to just comment yet. You tried:
autoplay="autoplay"
?
You can use the "isInViewport" plugin (linked below) to find out which video is currently in the viewport and execute some js code accordingly.
$(function () {
$('#fullpage').fullpage({
verticalCentered: true,
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
afterRender: function () {
$('video').each(function () {
if ($(this).is(":in-viewport")) {
$(this)[0].play();
}
}
});
});
Bare in mind that looping through every video element is not the most efficient method to employ, but this should be enough to get you started.
jQuery plugin: isInViewport
Or you can just use autoplay property, something like
<video preload="auto" autoplay loop="loop" muted="muted" volume="0" id="myVideo">
//----use just this one---^
Related
I'm building a webpage where I have several video, so I've exported 2 different media for each of them: one high quality to show on desktop and a lower quality one to show on mobile.
To do so I styled my video element like this:
<video autoplay muted loop playsinline id="video-1">
<source class="mob-hidden" src="video-1.mp4" type="video/mp4">
<source class="des-hidden" src="video-1-low.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
where mob-hidden and des-hidden are css classes with a display: none; to prevent them to appear in mobile or desktop.
The problem is that I noticed that when on mobile and desktop the page still downloads both video versions even if it uses just one, so I guess that using css classes is not enough.
Can you help understand how to prevent the webpage to download media that it's not going to use? so low-quality video when on desktop and high-quality videos when on mobile.
Thank you very much!
Try this:
<video controls>
<source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
<source src="the-sky-is-calling-large.webm" media="screen and (min-width:800px)">
<source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
<source src="the-sky-is-calling-small.webm" media="screen and (max-width:799px)">
</video>
I can see 3 potential approaches here
Checking width of the page in CSS
Since your video have two differences classes , you could code something like this
.des-hidden{
display: none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
.des-hidden{
display:none
}
.mob-hidden{
display: block;
}
}
BUT you'll have to change your HTML to something like this, to make it work
<video autoplay muted loop playsinline id="video-1" class="mob-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<video autoplay muted loop playsinline id="video-2" class="des-hidden">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Checking width of the page in JS
You could use something like this changing your classes for IDs:
window.addEventListener("resize", function(event) {
if (document.body.clientWidth <= 768) {
document.getElementById("des-hidden").style.display = "none";
document.getElementById("mob-hidden").style.display = "block";
} else {
document.getElementById("des-hidden").style.display = "block";
document.getElementById("des-hidden").style.display = "none";
}
});
Checking device in Back-End
Depending on your backEnd, if you have one (PHP, Node.Js) , you could check for the user-agent, and decide to display one video or the other
You can look at this if you use PHP :
Simplest way to detect a mobile device in PHP
Or if you use NodeJs :
Identify if the request is coming from mobile or not
More details
On recent browser, using the display:none CSS property will skip completely the file loading, meaning the video won't even get requested by the browser, saving both loading time and data usage
(See Does “display:none” prevent an image from loading?
Using a back-end solution could help to be sure the right video will receive the right video, preventing useless loading time, but it'll be harder for your page to adapt if the width of the page changes after the loading
So I recommend using the CSS option if you don't want to deal with Ajax or nodeJs asynchronsism
I've developed on Jquery API for HTML5 Vido. It works fine except a single issue.
Task: Have to show poster image on the end of a video.
Code I've used:
$hdVideo.bind('ended', function() {
$hd_play_btn.removeClass('hd-paused-button');
$(".hd-video-main-control").removeClass('hd-video-main-control-none');
$hdVideo.load();
});
Issues: It shows poster on the end of the video. But unfortunatly the second video source starts when play the video again in chrome 13.0.
My HTML code is:
<video width="630" height="354" class="hd-flv-player" poster="asserts/poster.png" controls="controls" data-name="demo video" data-uid="57fb2708">
<source src="http://hdflvplayer.net/hdflvplayer/videos/Casion-Royale-Chase.mp4" data-quality="hd"/>
<source src="http://static.clipcanvas.com/sample/clipcanvas_14348_offline.mp4" data-quality="sd"/>
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" data-quality="hd"/>
<source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" data-quality="sd"/>
</video>
JQuery Plugin call code:
$(function(){
var $hdVid = jQuery.noConflict();
$hdVid(function(){
$hdVid('.hd-flv-player').hdVideo();
});
});
Please let me know how to fix my bug.
I followed the quick-start guide for videojs and placed the following code inside the body of my html document:
<video id="video" class="video-js vjs-default-skin" controls width="941"
height="531" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="dummy_url">
</video>
All works fine. Autoplay and controls in place.
As I needed to remove the video when the video ends I placed the following code right after the video tag:
<script type="text/javascript">
_V_("video").addEvent("ended", videoEnd);
function videoEnd(){
$('#divId').slideToggle("slow");
setTimeout("$('#divId').remove()", 700);
}
</script>
The problem is that everytime I try to detect some video the autoplay doesn't work anymore. Even the following doesn't trigger autoplay:
<script type="text/javascript">
_V_("video").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
_V_("video").addEvent("ended", videoEnd);
function videoEnd(){
$('#divId').slideToggle("slow");
setTimeout("$('#divId').remove()", 700);
}
</script>
Any idea on how I can keep the autoplay and listen to the ended event?
Well, I'm not sure if this is the most correct implementation but:
<video id="video" class="video-js vjs-default-skin" controls
width="941" height="531" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="dummy_url">
</video>
<script type="text/javascript">
interval = setInterval(videoLoaded, 100);
function videoEnd(){
$('#someid').slideToggle("slow");
setTimeout("$('#someid').remove()", 700);
}
function videoLoaded(){
if(!_V_.players.video){
return false;
}
_V_.players.video.play();
_V_.players.video.addEvent("ended", videoEnd);
clearInterval(interval);
}
</script>
From what I have read, the alternative is to load the video through js only.
This is a problem (from what I read) with the way videojs initializes the video objects. More details can be found here.
Hope it helps some bumper :)
actually better is to start videoLoaded function using setTimeout function, because you can not control your player (if you will need it).
I'm using the video.js plugin and have a video intro that plays when my site loads. It works by autoplaying as soon as the page loads and it is in a div container that is z-indexed and overlayed over my home page.
I have jquery set to delay() and then fadeOut() the div out revealing my home page.
Good in theory only everyone has different connection speeds and the fadeOut() often happens too early or too late.
Is there a way to fadeOut() my div when the video has stopped?
Here is my jQuery:
$(document).ready(function() {
$("#overlay-video").delay(10000).fadeOut('slow');
});
EDIT: I have also just tried the following but this also does not work:
$(document).ready(function(){
$("#movie-id").bind('ended', function(){
alert("planet earth");
});
});
Thanks for the replies my HTML looks like this:
<div id="overlay-video">
<!-- Begin Video.js -->
<video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
</video>
<!-- End Video.js -->
</div>
My jQuery is working because I can fadeOut the video element fine.
Couple things:
only a single doc.ready fxn is needed for all your scripts on your home page
use the on() method (with jQuery 1.7+)
Most importantly, fadeOut() needs to be inside the on('ended') function
As a general HTML5 <video> solution, this should work: http://jsfiddle.net/trpeters1/XzCMb/1/
$(document).ready(function(){
$("#movie-id").on('ended', function() {
console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
});
});
However, Video-js appears to require a call to the video.js object, so do this instead: http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video
_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn
this.addEvent("ended", function(){ //adding "ended" event to video-js object
{ console.log('im done');
$("#overlay-video").delay(10000).fadeOut('slow');
}
});
});
This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me