【HTML】讲讲HTML5视频播放的方式

2024 年 7 月 14 日 12点热度 0人点赞 0条评论

【HTML】讲讲HTML5视频播放的方式

引言

github：【HTML】讲讲HTML5视频播放的方式

内容速递：看了本文您能了解到的知识！

HTML5视频

想要网页播放视频再也不需要使用插件了，HTML本身就支持，而且更加稳定！

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

1、HTML5视频的播放方式

HTML5视频的播放方式.drawio

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

1.1、embed方式

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

例如

<embed src="movie.swf" height="200" width="200"/>

缺陷

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

1.2、obejct方式

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

例如

<object data="movie.swf" height="200" width="200"/>

缺陷

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

1.3、video方式

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

<video src="horse.mp4" controls></video>

效果

缺陷

video标签在 HTML 4 中是无效的，因为它是HTML5新出的标签
依赖浏览器的支持

2、最好的解决方案

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

示例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

讲解

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

效果

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

3、视频格式

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

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

4、video标签

4.1、video的属性

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

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

4.2、video的事件

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

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

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

5、来一个视频播放器的案例

讲了那么多，不就是等一个案例吗，来！

码上！

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
    <title>video视频demo</title>
    <style> * {
       margin: 0; padding: 0; } body {
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "微软雅黑" } h1 {
       width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color: #33942a; } #video {
       margin: 20px 0; width: 100%; height: 200px; } </style>

</head>

<body>

    <h1>video视频播放demo</h1>

    <video id="video" controls src="https://www.runoob.com/try/demo_source/movie.mp4"></video>

</body>

</html>

效果

6、总结

视频播放的案例也走不掉的。本文主要是理论知识的讲解。

重构前端知识体系，你要一起吗？

系列好文

HTML历史：【HTML】你还会来看HTML吗？带你重温亦或走进

HTML标签：【HTML】带你重忆HTML那些记忆模糊的标签

HTML视频：【HTML】讲讲HTML5视频播放的方式

HTML音频：【HTML】HTML5给网页音频带来的变化

HTML语义化：【HTML】讲讲对HTML5的语义化的理解

HTML定位：【HTML】HTML5的新特性Geolocation

HTML拖放：【HTML】HTML5的拖放你用了吗

HTML缓存：【HTML】不来看看HTML5的WebStorage吗

HTML应用缓存：【HTML】HTML5的应用程序缓存

HTML的Web Werkors：【HTML】HTML5的Web Werkors

博客说明与致谢

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

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

感谢万能的网络，W3C，菜鸟教程等！

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

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

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

幸好我在，感谢你来！