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

要实现自动播放需要同时使用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


总结

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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐