HTML5 视频全屏的方法有多种,下面将详细介绍两种常用的方法:使用 JavaScript 和 HTML5 属性。
(图片来源网络,侵删)方法一:使用 JavaScript
1、在 HTML 文件中添加一个 <video>
标签,用于播放视频。
<video id="myVideo" width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video>
2、在 HTML 文件中添加一个按钮,用于触发视频的全屏操作。
<button onclick="playFullScreen()">全屏播放</button>
3、在 HTML 文件中添加以下 JavaScript 代码,用于实现视频的全屏功能:
function playFullScreen() { var video = document.getElementById("myVideo"); if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { // Firefox video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera video.webkitRequestFullscreen(); } else if (video.msRequestFullscreen) { // IE/Edge video.msRequestFullscreen(); } }
4、保存文件并在浏览器中打开,点击 "全屏播放" 按钮即可将视频全屏播放。
方法二:使用 HTML5 属性
1、在 HTML 文件中添加一个 <video>
标签,用于播放视频。
<video id="myVideo" width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video>
2、在 HTML 文件中添加一个按钮,用于触发视频的全屏操作。
<button onclick="playFullScreen()">全屏播放</button>
3、在 HTML 文件中添加以下 JavaScript 代码,用于实现视频的全屏功能:
function playFullScreen() { var video = document.getElementById("myVideo"); if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { // Firefox video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { // Chrome, Safari and Opera video.webkitRequestFullscreen(); } else if (video.msRequestFullscreen) { // IE/Edge video.msRequestFullscreen(); } }
4、保存文件并在浏览器中打开,点击 "全屏播放" 按钮即可将视频全屏播放。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。