H5视频

示例图片 127.0.0.1_5500_%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE_index.html.png 示例代码

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <style>
     body {
       margin: 0;
     }
   
     .close_place {
       position: fixed;
       top: 8px;
       right: 32px;
       width: 35px;
       height: 35px;
       cursor: pointer;
     }

     .close_out {
       position: fixed;
       z-index: 9999;
       top: 0px;
       width: 100%;
       height: 50px;
       opacity: 0.5;
       background-color: rgb(164, 167, 167);
    }

    .video_place {
       width: 100vw;
       height: 100vh;
     }
   
    .sp {
       opacity: 1;
       position: fixed;
       height: 100vh;
     }
   </style>

   <div id="app" style="height: 100vh">
     <div class="sp">
       <video id="videoPlayer" controls autoplay muted class="video_place">
         <source src="assets/oceans.mp4" type="video/mp4">
       </video>
       <div class="close_out">
         <img src="" class="close_place" id="close" title="关闭">
       </div>
     </div>
   </div>

<script>
 let close = document.getElementById("close");
 close.addEventListener("click", function () {
   window.close();
 });
</script>

常用属性与事件

MDN：developer.mozilla.org/zh-CN/docs/…

圈中部分为视频格式的类型，可选择：

类型
MP4	video/mp4	使用 H264 视频编解码器和AAC音频编解码器
WebM	video/webm	使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg	video/ogg	使用 Theora 视频编解码器和 Vorbis音频编解码器

推荐常用属性：
controls：为视频底部提供一个控制面板
autoplay ：自动开始播放
muted : 布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放

推荐常用事件
currentTime: 视频开始时间
requestFullscreen: 全屏模式显示
play: 开始播放

使用案例

//获取video中的id
let videoPlayer = document.getElementById("videoPlayer");
//按钮点击事件
open() {
  videoPlayer.currentTime = 0;  //设置视频每次开始时间从0开始 
  videoPlayer.requestFullscreen(); //视频播放器以全屏模式显示
  videoPlayer.play();  //播放视频
},

出现问题

添加autoplay，不能默认播放，无效

如上，我想要视频默认播放，添加了autoplay，但是偶尔自动播放，偶尔不播放的情况
解决办法
添加 muted属性

Html5 — 视频播放

H5视频

常用属性与事件

出现问题

添加autoplay，不能默认播放，无效