好记性，不如烂笔头

万物寻其根，通其堵，便能解其困。
  博客园  :: 新随笔  :: 管理

Video视频

Posted on 2024-07-22 19:25  彲  阅读(10)  评论(0)    收藏  举报

原生video

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
</head>
<body>
    <!-- video视频控件：
        autoplay：是否自动播放，值：autoplay。
        controls：是否显示播放控件，值：controls。
        width/height：设置播放器的宽度/高度。
        loop：是否循环播放，值：loop
        preload：是否进行预加载，注：autoplay自动播放就包含预加载。
        src：视频路径。
        poster：加载等待的画面(图片地址)。
        muted：是否静音播放，值：muted
　　　　 playsinline：布尔属性（主要用于移动端），若存在则视频在浏览器内播放，不进入全屏模式（需配合浏览器兼容性设置）。
　　　　 controlslist：自定义控制控件的显示 / 隐藏，可选值（用空格分隔）：nodownload：隐藏下载按钮；nofullscreen：隐藏全屏按钮；noremoteplayback：禁止远程播放。
　　　　 crossorigin：配置视频的跨域请求策略，可选值：anonymous：匿名跨域；use-credentials：带凭证跨域。
　　　　 mediagroup：将多个视频元素分组，用于同步控制（如多个视频同时播放 / 暂停）。
        //
     -->
    <video autoplay="autoplay" controls="controls'" width="500" loop="loop" preload="auto" src="file://D:/测试材料/1.mp4" poster="file://D:/测试材料/d1c389a724f7429387d6dfccc4b7b3bb.jpg" muted="none"></video>
</body>
</html>

 

额外补充：
- play: 当媒体开始播放时触发,这是最常用的媒体事件之一
- seeked: 当用户完成了进度条拖动操作,媒体跳转到新的时间点后触发
- abort: 当媒体加载终止时触发,比如网络中断或用户主动停止加载时

。对于媒体加载相关的事件:
- loadstart:开始加载媒体
- loadeddata:已加载当前帧的媒体数据
- loadedmetadata:已加载媒体的元数据

其他常见的Video/Audio事件还包括:
- pause:媒体暂停时触发
- ended:媒体播放结束时触发
- volumechange:音量改变时触发
- timeupdate:当前播放位置改变时触发