HTML5视频标签，以全屏播放与Android

我创建一个移动网站，我有我想要当有人点击一个链接来播放视频：HTML5视频标签，以全屏播放与Android

<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一样进入全屏？

来源

2012-07-10 Tom

它在android上做了什么？ – Grinn 2012-07-10 19:07:08

一旦你玩了它，它保持我指定的高度/宽度参数（我需要这样你可以回到同一个视频）的球员的大小。您可以再次点击从控制台全屏显示，但我希望能像iPhone一样立即全屏显示。 – Tom 2012-07-10 19:10:51

浏览器安全模式将不允许您全屏播放“播放”或“播放”事件。你必须使用“点击”。但是，并非所有的点击事件都会导致播放视频。所以，在你想检查video_tag.paused === false的点击处理程序中，并调用video_tag.webkitRequestFullScreen（） – 2014-10-31 16:21:29

我已经放弃了这一点。我的结论是Android设备上的html5视频标签会大块。它适用于某些设备，但不适用于其他设备。并没有像3.x或4.x这样的通用标准，它似乎是随机的。我希望这会很快变好，特别是因为闪存支持不再存在。

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

来源

2012-08-04 19:41:08 Tom

本文支持您的结论：http://stackoverflow.com/questions/15768837/playing-html5-video-on-fullscreen-in-android-webview – Nilzor 2014-08-13 06:32:36

你签出了mediaelement.js吗？

来源

2012-07-10 19:08:51 Grinn

我已检查过它，即使在Android Kitkat 4.4 – 2016-02-11 09:39:26

尝试沿着线的东西：

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);

无论是或可能沿着线的东西：

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);

webkitEnterFullscreen是VIDEO元素的全屏方法目前正在对iOS版。我不确定在Android设备上的支持。

mozRequestFullScreen和webkitRequestFullScreen是Mozilla和Google的FullScreen API的实现，用于在几乎任何DOM元素上激活全屏模式。

希望，让你至少出发点，从工作...

来源

2012-07-10 19:36:10 natlee75

上也不起作用，谢谢。这看起来像是从一开始。我对你发布的内容做了一个快速尝试，但没有成功，看起来我有一些研究要做。 – Tom 2012-07-11 17:53:22

大多数供应商需要用户交互才能全屏显示，这就是natalee的答案无效的原因。对于Andriod的，你可以调用webkitEnterFullScreen（）你的锚的点击处理程序内，因为它是一个有效的用户互动：

myvideo[0].webkitEnterFullScreen(); 
    myvideo[0].play();

或

$('#myfileplayer')[0].webkitEnterFullScreen(); 
    $('#myfileplayer')[0].play();

注意如何我剥jQuery的包装与[0]。否则不起作用。

来源

2014-03-26 00:20:15 Griffin

这应该工作，与普通的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(); 
}

你必须触发播放（）全屏指令之前，否则在Android浏览器就只是去全屏，但它不会开始播放。使用最新版本的Android Browser，Chrome，Safari进行测试。

来源

2014-06-25 08:17:29

HTML5视频标签，以全屏播放与Android

回答

相关问题