【重构前端知识体系之HTML】HTML5视频播放的方式

【重构前端知识体系之HTML】HTML5视频播放的方式

引言

上节讲了HTML5的音频播放,和音频播放一样,需要借助flash才能在网页上使用视频。随着HTML5出来以后,就不需要借助flash了,本身可以通过video标签支持。

HTML5视频的播放方式

在 HTML 中播放视频并不容易!准确的来说是想要做好兼容并不容易!

embed方式

embed定义一个外部的容器,用来装放MP4等视频文件。

例如


缺陷

  • embed标签在 HTML 4 中是无效的,因为它是HTML5新出的标签
  • 依赖浏览器的支持
  • 如果浏览器不支持 Flash,那么视频将无法播放

obejct方式

obejct也可以定义一个外部的容器,用来装放MP4等视频文件。

例如


 
 

缺陷

  • 依赖浏览器的支持
  • 依赖插件的安装
  • 如果浏览器不支持 Flash,那么视频将无法播放

video方式

video标签是HTML5专门为视频出的一个标签。推荐使用!


效果

image-20220207215114260

缺陷

  • video标签在 HTML 4 中是无效的,因为它是HTML5新出的标签

  • 依赖浏览器的支持

最好的解决方案

上面讲了三种使用视频的方式,可以将一些结合起来使用。

示例


讲解

看到以上使用了 4 种不同的视频格式,这样做的好处video元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 embed>元素。

效果

显示的效果基本与video一致!

image-20220207215114260

视频格式

video 元素支持三种视频格式: MP4, WebM, 和 Ogg

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

video标签

video的属性

一些常用的video属性,全局属性在这里就没有列出来来了。更多请到w3school查阅。

属性 描述
autoplay 设置或返回是否在加载完成后随即播放音频/视频
controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)
loop 设置或返回音频/视频是否应在结束时重新播放
muted 设置或返回音频/视频是否静音
preload 设置或返回音频/视频是否应该在页面加载后进行加载
src 设置或返回音频/视频元素的当前来源

video的事件

事件这是我们用来跟音频发生交互的重要武器。

同样的只给出部分事件,更多请到w3school查阅。

事件 描述
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
canplay 当浏览器可以播放音频/视频时
timeupdate 当目前的播放位置已更改时

来一个视频播放器的案例

讲了那么多,不就是等一个案例吗,来!

码上!





    
    
    video视频demo
    





    

video视频播放demo

效果

image-20220207221322200

总结

视频播放的案例也走不掉的。

重构前端知识体系,你要一起吗?

博客说明与致谢

文章所涉及的部分资料来自互联网整理,其中包含自己个人的总结和看法,分享的目的在于共建社区和巩固自己。

引用的资料如有侵权,请联系本人删除!

感谢万能的网络,W3C,菜鸟教程等!

感谢勤劳的自己,个人博客,GitHub学习,GitHub

公众号【归子莫】,小程序【子莫说】

如果你感觉对你有帮助的话,不妨给我点赞鼓励一下,好文记得收藏哟!关注我一起成长!

所属专栏:重构前端知识体系(HTML)

幸好我在,感谢你来!

你可能感兴趣的:(【重构前端知识体系之HTML】HTML5视频播放的方式)