html5 视频如何全屏

HTML5 视频全屏的方法有多种,下面将详细介绍两种常用的方法:使用 JavaScript 和 HTML5 属性。,方法一:使用 JavaScript,1、在 HTML 文件中添加一个
<video> 标签,用于播放视频。,2、在 HTML 文件中添加一个按钮,用于触发视频的全屏操作。,3、在 HTML 文件中添加以下 JavaScript 代码,用于实现视频的全屏功能:,4、保存文件并在浏览器中打开,点击 “全屏播放” 按钮即可将视频全屏播放。,方法二:使用 HTML5 属性,1、在 HTML 文件中添加一个
<video> 标签,用于播放视频。,2、在 HTML 文件中添加一个按钮,用于触发视频的全屏操作。,3、在 HTML 文件中添加以下 JavaScript 代码,用于实现视频的全屏功能:,4、保存文件并在浏览器中打开,点击 “全屏播放” 按钮即可将视频全屏播放。,
,<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>,<button onclick=”playFullScreen()”>全屏播放</button>,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(); } },<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>,<button onclick=”playFullScreen()”>全屏播放</button>

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《html5 视频如何全屏》
文章链接:https://zhuji.vsping.com/469591.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。