全屏视频切换HTML [英] Full screen video toggle HTML
本文介绍了全屏视频切换HTML的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
HTML 5中的视频标签真的很吸引人。我需要知道是否可以让用户切换全屏播放。我不想使用任何其他视频插件。我只需要使用视频标签。这是可能的。请帮助我......
The video tag in HTML 5 is really fascinating. I need to know whether it is possible to let users toggle full screen play. I dont wanna use any other video plugin. I just need to use the video tag. So is this possible. Please help me out....
推荐答案
您可以使用以下代码来创建一个按钮,将视频填满屏幕模式。
You can use the following code to create a button that will take the video into full screen mode.
Javascript代码:
Javascript code:
<script type="text/javascript">
function goFullscreen(id) {
var element = document.getElementById(id);
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
</script>
Html代码:
Html code:
<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
<source src="INPUT VIDEO URL HERE"/>
Your browser does not support the HTML5 video tag. Use a better browser!
</video>
<button onclick="goFullscreen('player'); return false">
View Fullscreen!
</button>
这篇关于全屏视频切换HTML的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文