实现html页面插入视频的自动播放、视频播放结束后的事件触发（video标签）

---

需求一：实现插入视频的自动播放

要实现自动播放需要同时使用autoplay和muted属性，简单示例代码如下：
html代码：

<video
      id="video"
      src="自定义的视频路径"
      autoplay="autoplay"
      muted="muted"
    ></video>

css代码：

#video {
    
    
  position: absolute;
  /*上下左右居中显示*/
  left: 124px;
  top: 25px;
  width: 1145px;
  height: 800px;
  z-index: 1;
}

---

需求二：实现视频播放结束后的事件触发

要实现视频播放结束后的事件触发需要使用addEventListener(“ended”, function () {})进行事件监听，简单示例代码如下：
html代码：

<video
      id="video"
      src="自定义的视频路径"
      autoplay="autoplay"
      muted="muted"
    ></video>

css代码：

#video {
    
    
  position: absolute;
  /*上下左右居中显示*/
  left: 124px;
  top: 25px;
  width: 1145px;
  height: 800px;
  z-index: 1;
}

js代码：

var v = document.getElementById("video");
v.addEventListener("ended", function () {
    
    
  // 在视频播放结束时执行的其他操作
});

---

关于video标签的知识内容

（1）菜鸟网址：https://www.runoob.com/tags/tag-video.html
（2）一位大佬的笔记：https://blog.csdn.net/millia/article/details/118360723

---

总结

以上就是有关页面中插入视频的笔记内容，希望对各位有所帮助，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。