We Keep Coding

Get html 5 video to automatically open in fullscreen mode

I succeeded in getting a video to open in fullscreen mode in response to events (click, keypress) using the HTML 5 video tag and jQuery. How do I get the video to open in fullscreen on page load instead of onclick? Any help would be appreciated. Many thanks!
My HTML:
<div id="video_container>
<video id="video1" width="1280" height="720" controls autoplay>
<source src="videos/ballet.mp4" type="video/mp4">
<source src="videos/ballet.webm" type="video/webm">
<source src="videos/ballet.ogv" type="video/ogg">
</video>
</div>
My JavaScript:
$(document).ready(function(){
$('#video1').bind("playing", function(){
var elem = document.getElementById("video1");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
$('#video1').bind("ended", function(){
$("#video_container").hide();
});
});

Sounds like you can't make the video fullscreen on page load, at least not for webkit browsers. According to the Safari Developer Library:
The webkitEnterFullscreen() method can be invoked only in response to
a user action, such as clicking a button. You cannot invoke
webkitEnterFullscreen() in response to a load event, for example.
Full article here: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

Show html5 video controls only on Android

I have this video tag with flash fallback:
<video id="myvideo" width="480" height="224" autoplay preload="auto" loop poster="intro6.jpg">
<source src="intro6.mp4" type="video/mp4">
<source src="intro6.webm" type="video/webm">
<source src="intro6.ogv" type="video/ogg">
<object width="480" height="224" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" />
<param name="flashvars" value="autostart=true&controlbar=hide&image=intro6.jpg&file=intro6.mp4&repeat=always" />
<img src="intro6.jpg" width="480" height="224" />
</object>
</video>
And as you can see i do not have any controls, it's just a looping video that autoplays. This works great on desktop browsers, but not so much on Android and iOS.
So i need the controls to be visible on Android as it doesnt autoplay or loop.
And on iOS i need the video not to autoplay.
Is there a way to accomplish this with javascript? And keep in mind i don't know much javascript.
Thanks!

Probably the easiest and most practical way is to check the user agent to see if you're on Android.
if (navigator.userAgent.indexOf('Android') >=0) {
document.getElementById('myvideo').controls = true;
}
In general, user agent sniffing is "frowned upon". It's usually best to use feature detection, since some far future version of the Android browser might support autoplay. But mobile browsers aren't usually very good at telling you when they don't support the video/audio spec.
Another way to do it is to check for events. In FF/Chrome/IE9+, the event will fire a series of events, including: loadstart, progress, durationchange, etc... up to play and playing. In the Android browser (at least, the old-ish version that I have), the video will instead fire a stalled event. You could look for stalled and then enable the controls. You could remove them again when you get the 'play' event.
var video = document.getElementById('myvideo'), started = false;
if (video && video.addEventListener) { //in case of IE < 9
video.addEventListener('stalled', function() {
if (!started) video.controls = true;
}, false);
video.addEventListener('play', function() {
started = true;
video.controls = false;
}, false);
}
But there are other reasons why you might see that event, like a slow internet connection. So you'll still risk seeing the controls for a bit in a desktop browser until the video starts.
You don't need to worry about iOS. It won't autoplay, even if you want it to.

Stop HTML5 audio with Javascript (Jquery?) + Zurb Modal

Here's my goal: To have autoplay audio stopped when a Zurb Modal window disappears.
I'm new with doing this stuff, especially javascript!
I have a Zurb Modal window functioning as a splash screen that pops up on page load. I have HTML5 audio in the window that autoplays (it was a request - I don't like autoplay!). The window disappears when the background is clicked, but the audio continues to play. I don't know how to get the audio to stop! If anyone has an idea, I'd really appreciate hearing about it.
<script type="text/javascript" src="js/jquery.reveal.js"></script>
<div id="myModal" class="reveal-modal">
<audio controls="controls" autoplay="autoplay">
<source src="audio/splash-loop-01.mp3" type="audio/mpeg">
<source src="audio/splash-loop-01.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<div class="close-reveal-modal">CLOSE ME</div>​<!-- USE THIS TO CLOSE WINDOW -->
<script>
$(document).ready(function (){
$('#myModal').reveal();
});
</script>

$(document).ready(function (){
$('.close-reveal-modal').click(function(){
audioPlayer.pause();
audioPlayer.src = '';
audioPlayer.load();
});
});

To pause the audio, place this in your document.ready:
$('.close-reveal-modal').click(function(){
var myAudio = document.getElementsByTagName("audio")[0];
if(myAudio != undefined){
myAudio.pause();
}
}

webkitEnterFullscreen() using external button works in Chrome and Safari but not iOS

Can anyone tell me why webkitEnterFullscreen() using an external button works in Chrome and Safari, but not iOS?
In iOS, the button doesn't work even if I set the video to "visible". It appears to only work once the video is playing, then it will allow me to launch fullscreen. I can't script it either by using "this.play();", it only works when a human hits the play button.
I'm using an iPad 2 and iOS 5.0.1
<html>
<head>
<title>Fullscreen Video</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
// hide video
$("#myVideo").css({'visibility' : 'hidden', 'display' : 'none'});
// extend button functionality
$('#fs').bind('click', function() {
// display the video
$("#myVideo").css({'visibility' : 'visible'});
// launch the video fullscreen
$("#myVideo")[0].webkitEnterFullscreen();
});
});
</script>
</head>
<body>
<h1>Fullscreen Video</h1>
<video id="myVideo" width="852" height="480" controls="false" preload="false">
<source src="videos/myVideo.mp4" type='video/mp4' />
</video>
<br />
<input type="button" id="fs" value="Fullscreen">
</body>
</html>

Shouldn't you override the "display: none" when you override the "visibility: hidden"?
I position my video offscreen (-2000 with position: absolute), and I use:
<script>
var videoPlayFullscreen = function() {
$('video').get(0).play();
$('video').get(0).webkitEnterFullscreen();
};
</script>
I couldn't get it to work until I used the ".get(n)" if that helps. (which may be the same as what you are doing: $('video')[n].
But my fullscreen only works if the video is already playing, like yours, but the code above to get it to play works on the iphone4, and iPad 1st gen.
My issue: On the iPad 1st gen, the video plays on first click (first time videoPlayFullscreen function is run) and goes into fullscreen on the second click (second time the function is run). I am thinking it is not ready to do the fullscreen right away, so maybe a delay time before that would work?
The play code works on the iPhone 4 (which initiates fullscreen with just a play and doesn't use/need the webkitEnterFullscreen in my experience).

Making a video to play as my websites favicon

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