☰

如何像 youtube 一样使用 html 和 javascript 全屏播放视频（mp4）？

tag-icon • tag-icon video html javascript
如何像 youtube 一样使用 html 和 javascript 全屏播放视频（mp4）？

如果您使用 Chrome 从 Android 访问 m.youtube.com，当您观看视频时，您会看到预览（带有播放按钮叠加的静态图像）。当您单击图像时，视频将全屏显示。我希望做同样的事情。

答案1

您需要requestFullscreen()针对给定元素执行以下操作。您需要执行如下操作：

var elem = document.getElementById('myvideo');
elem.requestFullscreen();

更多信息请访问https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api和https://stackoverflow.com/questions/6039909/html5-full-screen-video

请让我知道这是否对你有用。

答案2

您可以参考以下示例。以下示例显示了不同浏览器的不同代码。

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

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}

相关内容