我有一个数据库字段，其中设置了不同的命令。例如播放、暂停和停止。客户端网页循环播放命令。如果命令是播放，它会调用另一个函数调用 playVideo() 并且应该全屏播放视频。如果我从视频标签的 onClick 事件调用 playVideo() 函数，它本身可以正常工作，但从服务器响应代码调用它时，它不能按预期工作。看看代码。我需要在 Chrome 桌面和 Chrome 移动浏览器上工作。
<!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>