html5视频标签可与Android全屏播放

Question

我正在创建一个移动网站,我有一个视频,当有人点击链接时我想玩这个视频:

<div id="player"></div>
<a href="#" onclick="DoNav('<?php echo $url; ?>');" title="Click to play video"> <?php echo $result_videos[$i]["camera_name"]; ?> </a>

<script type="text/javascript">
function DoNav(theUrl)
{

  // only add the player if it doesn't yet exist
  if($('#myfileplayer').length == 0) {
    var mydiv = $("#player");
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
    mydiv.append(myvideo);
  } else {
    $('#myfileplayer').attr("src",theUrl); 
  }

} 
</script>

使用iPhone,这很好用,我点击视频,它全屏显示.Android也可以使用,但它需要您点击要播放的视频然后点击全屏.当你上场时,是否可以像iPhone一样进入全屏？

Answer 1

使用纯Javascript应该可以使用：

var myVideo = document.getElementById('myVideoTag');

myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
    // This is for Android Stock.
    myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen)  != "undefined") {
    // This is for Chrome.
    myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen)  != "undefined") {
    myVideo.mozRequestFullScreen();
}

您必须在全屏指令之前触发play（），否则在Android浏览器中它将进入全屏状态，但不会开始播放。已测试最新版本的Android浏览器，Chrome，Safari。

Answer 2

我已经放弃这个了 我的结论是，Android 设备上的 html5 视频标签会导致块崩溃。它适用于某些设备，但不适用于其他设备。并且没有像 3.x 或 4.x 这样的通用标准，它看起来只是随机的。我希望这很快就会变得更好，特别是因为闪存支持不再存在。

奇怪的是，坚持简单href似乎是最一致的。你失去了一些控制，但比视频标签好得多......至少到目前为止。