云主机测评网云主机测评网云主机测评网

云主机测评网
www.yunzhuji.net

html5 视频如何全屏

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、保存文件并在浏览器中打开,点击 "全屏播放" 按钮即可将视频全屏播放。

打赏
版权声明:主机测评不销售、不代购、不提供任何支持,仅分享信息/测评(有时效性),自行辨别,请遵纪守法文明上网。
文章名称:《html5 视频如何全屏》
文章链接:https://www.yunzhuji.net/jishujiaocheng/27715.html

评论

  • 验证码