I'm trying to get a video to auto play on Android handheld devices. This code works on desktop computer tested in Google Chrome. What can I do to have the video autostart on mobile devices?
<!DOCTYPE html>
<html lang="en">
<head>
<title>vid</title>
<script src="assets/js/jquery.min.js"></script>
<script>
$(document).ready(function() {
var myVideo = document.getElementById("video1");
function checkLoad() {
if (myVideo.readyState === 4) {
window.setTimeout(function() {
window.scrollTo(0, 0);
myVideo.play();
}, 800);
} else {
setTimeout(checkLoad, 100);
}
}
checkLoad();
});
</script>
</head>
<body>
<video id="video1" autobuffer>
<source src="assets/video/BigBuck.m4v">
<source src="assets/video/BigBuck.webm" type="video/webm">
No video support
</video>
</body>
</html>
Auto-play is disabled since Android SDK 17. Autoplay on most mobile platforms (Android, iOS) gets blocked to avoid poor user experiences - video should only play following a user action. But here is a workaround
int SDK_INT = android.os.Build.VERSION.SDK_INT;
if (SDK_INT > 16) {
engine.getSettings().setMediaPlaybackRequiresUserGesture(false);
}
by doing this you can set setMediaPlaybackRequiresUserGesture() to false to re-enable auto-play.
Related
How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
I am trying to redirect to a different URL after a html video has ended. This cannot be using a FLASH player as it won't work on iOS devices. Any help or direction will be appreciated. Here is my code:
<head>
<script type="text/javascript">
myVid = document.getElementById("video1");
function redirect()
{
if (myVid.ended == true) {
window.location = "http://www.google.com";
}
</script>
</head>
<body>
<video id="video1" controls="controls">
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
set the id of your video to 'myvid' and here is the solution
video = document.getElementById('myvid');
video.addEventListener('ended',function() {alert('video is ended');
window.location.href = 'http://www.google.com';})
here is the demo
use window.location.replace('http://www.google.com'); so user dosnt get stuck in back button loops
<script>
var video1 = document.getElementsByTagName('video1')[0];
video1.onended = function(e) {
window.location.replace('http://www.google.com');
}
</script>
Javascript:
document.getElementById('video-id').addEventListener('ended',function(){
window.location.href = 'http://www.your-url.com';
},false);
jQuery:
$("#video-id").on("ended", function() {
window.location.href = 'http://www.your-url.com';
});
Youtube:
How to detect when a youtube video finishes playing?
This worked for me :
<script>
function videoEnded() {
location.href="https://www.google.com";
}
</script>
<video id="myVideo" width="640" height="480" controls autoplay onended="videoEnded()">
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
I am working on a functionality where on my screen load, a video should start playing reverse. (from its last frame to the first frame).
It can actually be on screen load or even on a button click.
At this moment, I've achieved until (with the help and support from StackOverflow) playing my video - and playing it in reverse after some duration of time. Here's the code I used-
<!DOCTYPE HTML>
<html>
<head>
<style>
video{
height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var video = document.getElementById('video');
var intervalRewind;
$(video).on('play',function(){
//video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause',function(){
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 3x fast speed forward
video.playbackRate = 8.0;
});
$("#negative").click(function() { // button function for rewind
intervalRewind = setInterval(function(){
video.playbackRate = 1.0;
if(video.currentTime == 0){
clearInterval(intervalRewind);
video.pause();
}
else{
video.currentTime += -.1;
}
},30);
});
});
</script>
</head>
<body>
<video id="video" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>
</body>
</html>
Now, I would like to know if there is a chance to play my video in reverse directly i.e. without progressing any duration in the forward direction, the video should start playing in reverse.
You need to wait until video is loaded, then you can get it's length with video.duration and then you can set the video current time to this value (Jump to end of the video);
Then you can start playing the video from last frame to first using your negative function.
video.addEventListener('loadeddata', function() {
video.currentTime = video.duration;
$('#negative').click();
}, false);
There is also nice fiddle about video playbacks at http://jsfiddle.net/UkMV2/5/ found from play a video in reverse using HTML5 video element
Following example is super slightly modified version of your's which achieves the "reverse" playback upon page & video loaded event.
<!DOCTYPE HTML>
<html>
<head>
<style>
video{
height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<video id="video" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>
<script>
$(function() {
var video = document.getElementById('video');
var intervalRewind;
$(video).on('play',function(){
//video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause',function(){
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 3x fast speed forward
video.playbackRate = 8.0;
});
$("#negative").click(function() { // button function for rewind
intervalRewind = setInterval(function(){
video.playbackRate = 1.0;
if(video.currentTime == 0){
clearInterval(intervalRewind);
video.pause();
}
else{
video.currentTime += -.1;
}
},30);
});
video.addEventListener('loadeddata', function() {
video.currentTime = video.duration;
$('#negative').click();
}, false);
});
</script>
</body>
</html>
I am working on a HTML5 video functionality and I have a question in SO asking the approach to be followed.
Found some semi-helping articles on w3.org website but found a completely working example on jsfiddle.net
Please follow the link here
I am trying the same as follows in my local machine -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
var video = document.getElementById('video').play();
var intervalRewind;
$(video).on('play', function () {
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$(video).on('pause', function () {
video.playbackRate = 1.0;
clearInterval(intervalRewind);
});
$("#speed").click(function () { // button function for 3x fast speed forward
video.playbackRate = 3.0;
});
$("#negative").click(function () { // button function for rewind
intervalRewind = setInterval(function () {
video.playbackRate = 1.0;
if (video.currentTime == 0) {
clearInterval(intervalRewind);
video.pause();
} else {
video.currentTime += -.1;
}
}, 30);
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<video id="video" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
I am not able to find out why and where this script is failing. Is jquerymobile a problem?
Expected: Both Forward and Reverse functionalities should work.
Actual: None of the two buttons are working.
Any help is very much appreciated.
Thanks in advance.
You script worked (more or less), all it took to make it work was to comment out setting playback rate on play event. It was interfering with setting playback rate after clicking fast-forward. Working example here http://jsfiddle.net/h9EVQ/32/
As to the script itself, you should realize, that your rewind implementation has some flaws. One of them is that video is actually paused the whole time, so user can't just press pause to stop rewinding. But that would be easily solvable. The other, bigger issue is, that while doing a rewind you hop back in time by .1 fraction. That may or may be not an issue for some setups/movies. For those shorter movies your rewind function might be to speedy.
The following code should play a video then redirect to another page. It works in Safari and the latest version of Chrome (http://www.brigadapictures.com/Home_test.html).
I could use some help in getting it to execute on other browsers. At the very least, I need it to immediately redirect if it encounters a problem (instead of displaying a blank black screen).
<video src="http://brigadapictures.com/images/image1.mov"; id="myVideo" autoplay height="434" width="770">
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) {
e = window.event;
}
top.location.href = "http://www.brigadapictures.com/Home.html";
}
</script>
Currently there is only support for the HTML5 video object in Google Chrome, Safari (i.e. webkit) and Fx 3.5+ MSDN does have an article on HTML5 and video so IE10 may have joined the ranks
For all other browsers I would redirect using script before even trying to show the video tag
Here is some info from Adobe about codecs and how to control the movie with JS
Here is a very good HTML5 tutorial I found
They suggest video for everybody or this code which I modified for IE8:
function supports_video() {
return !!document.createElement('video').canPlayType;
}
I created this page from your page, but I am getting 206 Partial content in Firefox. Chrome works perfectly. Perhaps a byte serving process is needed or Firefox just need another file as specified here with the example page here
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 video page</title>
<script type="text/javascript">
function supports_video() { // test the availability of video support
var v = document.createElement('video');
return v && v.canPlayType;
}
function goHome() {
top.location.replace("http://www.brigadapictures.com/Home.html"); // do not want to break the back button
}
window.onload=function() {
if (supports_video) {
var video = document.getElementById('myVideo'); // not sure how IE8 gets to this line, but it does
if (video && video.addEventListener) video.addEventListener('ended', goHome, false);
else goHome(); // IE8 peculiarity.
}
}
</script>
</head>
<body>
<script type="text/javascript">
if (supports_video) {
document.write('Here this video is supposed to appear:<br /><video src="image1.mov" id="myVideo" autoplay="true" height="434" width="770">Video not supported anyway</video>');
}
else {
alert('Sorry, this browser does not support HTML5 video, redirecting...')
goHome();
}
</script>
</body>
</html>
Script to Autoplay a Video then Redirect to Another Page
This script is tested on Safari, Firefox, Chrome, Opera, and Internet Explorer. It also works (and autoloads) on iPhone.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://brigadapictures.com/images/flowplayer-3.2.6.min.js">
</script>
</head>
<body>
<video width="488" height="488" autoplay id="myVideo">
<source src='http://brigadapictures.com/images/image2.mp4' type='video/mp4' />
<source src='http://brigadapictures.com/images/image1.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src='http://brigadapictures.com/images/image1.ogg' type='video/ogg; codecs="theora, vorbis"' />
<source src='http://brigadapictures.com/images/image1.webm' type='video/webm; codecs="vp8, vorbis"' />
<!-- Flowplayer as fallback for html5 video tag into the following container -->
<div id="flashfallback" style="width:488px;height:488px;display:block"></div>
</video>
<script type="text/javascript">
//<![CDATA[
var videotag = document.getElementById("myVideo"),
videosupport = !!videotag.canPlayType;
function myHandler(e) {
if(!e) { e = window.event; }
top.location.replace("http://www.brigadapictures.com/Home.html");
}
if (videotag.addEventListener) {
videotag.addEventListener('ended', myHandler, false);
}
if (videosupport) {
videotag.load();
videotag.play();
} else {
$f("flashfallback", "http://brigadapictures.com/images/flowplayer-3.2.6.swf", {
clip: {
url: "http://brigadapictures.com/images/image4.m4v",
onStart: function () {
this.setVolume(100);
},
onFinish: function () {
top.location.replace("http://www.brigadapictures.com/Home.html");
}
},
canvas: {backgroundGradient: "none"},
play: null,
plugins: {controls: null}
});
}
//]]>
</script>
</body>
</html>