WebAPP开发——H5标签video（属性和API事件）

最新推荐文章于 2025-04-19 19:19:28 发布

吴小花的博客

最新推荐文章于 2025-04-19 19:19:28 发布

阅读量2k

点赞数 1

分类专栏： Web前端开发

本文链接：https://blog.youkuaiyun.com/weixin_39089928/article/details/104393702

版权

Web前端开发专栏收录该内容

43 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了HTML5的video标签，包括src属性和controls属性的使用。同时，探讨了video API中的关键事件，如play(), pause()，duration，currenttime，volume等，以及如何监听视频播放状态、控制播放速度和实现全屏播放等功能。" 123671155,10378741,田忌赛马问题的动态规划解决方案,"['动态规划', '算法', '博弈论']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.video标签

src - 视频链接 controls - 视频控制器的

video 在各个浏览器中显示的差异
safai : mp4
chrome: mp4、webm、ogv
firefox:mp4、webm、ogv
Opera:mp4、webm、ogv

source 标签 也可以放入src 如果播放失败 video 会继续看下一个source 标签，直到兼容。

2.video标签属性

video标签属性
src - 视频的资源地址
width - 改变视频宽度
height -改变 视频高度
若两者一起使用，播放器会拉伸，但是播放的内容不会拉伸始终在最中心的位置
controls - 播放控件
autoplay - 自动播放
loop - 循环播放
poster - 视频封面，没有播放时显示的图片（视频刚加载时没有播放）
muted - 当设置改属性后，它规定视频的音频输出应该被静音

了解本专栏