android - 使用 Android 全屏播放的 html5 视频标签

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 进行测试。