I have a database field which has different commands set to it. For e.g play, pause and stop. The client webpage loops for the command to be play. If the command is play it calls another function call playVideo() and should play a video in full screen. playVideo() function by itself works fine if I call it from onClick event of video tag but does not work as expected when it is called from the server response code. Have a look at the code. I need that working on Chrome Desktop and Chrome mobile browser.
<!DOCTYPE HTML>
<html>
<head>
<title>Demo: HTML5 video controls with JavaScript</title>
<style media="screen" type="text/css">
div.container {
background-color: #ddd;
margin: 0 0 20px;
padding: 1px 1px 0;
width: 1280px;
height: 720px;
}
p {
font: 14px/1.3 Verdana, sans-serif;
}
p.back {
bottom: 20px;
left: 10px;
position: absolute;
}
ul, li, p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
overflow: hidden;
padding: 10px 0;
width: 100%;
}
li {
float: left;
}
li.play_pause {
padding-left: 10px;
width: 40px;
}
li.time {
text-align: center;
width: 160px;
}
li.volume {
padding-right: 10px;
width: 100px;
}
.control {
color: red;
cursor: pointer;
}
</style>
<!-- <script src="test_scripts/video.js" type="text/javascript"></script> -->
<script>
//var video = document.getElementById('video');
//video.addEventListener('click', function() {
//video.play();
//}, false);
//init();
window.onload = function() {
var pElement = document.getElementById("video");
pElement.load();
};
/*
var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
*/
function createObject() {
var request_type;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
var nocache = 0;
/*
window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width + screen.height);
}, false);*/
window.setInterval(function() {
waitForCommand();
}, 3000);
//waitForCommand();
function init() {
alert("init");
var element = document.getElementById('video');
element.load();
};
function waitForCommand() {
nocache = Math.random();
http.open('get', 'serverside/getcommand.php');
http.onreadystatechange = insertReply;
http.send(null);
}
var statusplay = 0;
function insertReply() {
if (http.readyState == 4) {
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
//alert(response);
if (response == "play" && statusplay == 0) {
alert("asddasd");
statusplay = 1;
var element = document.getElementById('video');
//element.click();
playVideo();
}
}
}
function playVideo() {
alert("123");
//document.getElementById('myvideo').play();
var element = document.getElementById("video");
//element.webkitEnterFullScreen();
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
document.mozRequestFullScreen();
alert("1212");
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
//element.webkitRequestFullScreen();
//document.webkitRequestFullScreen();
alert("1313");
} else {
alert("1414");
element.webkitEnterFullScreen();
}
//element.load();
//element.addEventListener("loaded", doSomething, true);
element.play();
//$('#video').attr({'autoplay':'true'});
}
function doSomething() {
//your redirect code here
alert("12321");
var element = document.getElementById('video');
element.play();
//playVideo();
}
</script>
</head>
<body>
<!--video id="video" src="http://tinyvid.tv/file/12lx2x62kr9io.ogg"></video-->
<div class="container" id="mydiv">
<a href="#" onclick="playVideo()">Contact</a>
<style type="text/css">
.video_player {
width: 100%;
height: 100%;
display: block;
}
</style>
<video class="video_player" id="video" name="video" autobuffer onclick="playVideo()" poster="images/video-pc.jpg">
<source src="videos/BigBuck.m4v"> </source>
<source src="videos/BigBuck.webm" type="video/webm"> </source>
<source src="videos/BigBuck.theora.ogv" type="video/ogg"> </source>
</video>
<ul class="controls">
<li class="play_pause">
<p class="control" id="play">
Play
</p>
</li>
<li class="time">
<p>
<span id="timer">1</span>' of <span id="duration">0</span>'
</p>
</li>
<li class="volume">
<p>
Vol: <span class="control" id="v-dn" title="Volume down">-</span> / <span class="control" id="v-up" title="Volume up">+</span><span id="volume">10</span>
</p>
</li>
</ul>
</div>
<!--p><strong>NB:</strong> The video doesn't seem to work in Chrome for Mac/Linux; please use an alternative browser until I can resolve this problem.</p-->
<p class="back">
<a href="/2009/10/06/building-html5-video-controls-with-javascript/">Back to post: Building HTML5 video controls with JavaScript</a>
</p>
</body>
</html>
Got my answer,
requestFullscreen() can not be called automatically is because of security reasons (at least in Chrome). Therefore it can only be called by:
click (button, link…)
key (keydown, keypress…)
allowfullscreen attribute of the HTML element*
* W3 Spec:
“…To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen…”
Read more: W3 Spec on Fullscreen