android播放自己服务器视频教程,android - 如果播放来自服务器的命令，则以全屏播放HTML5视频 - 堆栈内存溢出...

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

Demo: HTML5 video controls with JavaScript

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;

}

//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();

}

Contact

.video_player {

width: 100%;

height: 100%;

display: block;

}

• Play

• 1' of 0'

• Vol: - / +10

Back to post: Building HTML5 video controls with JavaScript