如何在移动设备上的原生播放器中播放 HTML5 视频？答案

【问题标题】：How to play HTML5 Videos in native player on mobile?如何在移动设备上的原生播放器中播放 HTML5 视频？
【发布时间】：2016-10-17 22:41:38
【问题描述】：

我的网站中嵌入了以下视频：

<video id="vid" data-src="/tasks/render/file/?method=inline&fileID=#local.child.getVideoFile()#">
    <source src="/tasks/render/file/?method=inline&fileID=#local.child.getVideoFile()#" type="video/mp4">
    Your browser does not support the video tag.
</video>

效果很好。我还把整个东西都包在了一个花哨的盒子里。这会在类似灯箱的叠加层中打开视频。这对桌面来说很好。

但现在我的问题...有什么办法可以在移动设备（iPhone、Android、其他）的本机视频播放器中打开视频？

我已经搜索了 HTML5 Video JavaScript Functions 和 HTML5 Video HTML Attributes，但找不到任何东西。

要开始播放视频，我使用的是这个：

function play(vID) {
    document.getElementById('vid').play();
}

【问题讨论】：

您是否希望从本机播放器获得某些特定功能，或者只是为了让视频以全屏模式播放？
@Mick 是的，基本上我只想要全屏模式的视频，并具有所有默认功能（播放、暂停、倒带等）。

标签： html video

【解决方案1】：

HTML5 实际上现在有一个 FullSscreen API - 它正在开发中，就像他经常使用新规范一样，但我认为最新版本的 iOS 和 Android 都支持它。

规范本身在这里：https://www.w3.org/TR/fullscreen/，它链接到此处的最新工作版本（查看奇怪的名称“See instead”链接）：https://fullscreen.spec.whatwg.org

此 Mozilla 页面上有一些示例，但需要注意它需要更新，因此值得您先尝试一下。

关键功能由 JavaScript 控制，使用文档中的视频元素。上面链接中的一个例子是：

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

【讨论】：