html怎么播放视频，html播放视频的方法。
想要网页播放视频再也不需要使用插件了，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>
效果
image-20220207215114260
缺陷
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一致！
image-20220207215114260
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>
本文地址：软件教程频道 https://www.eeeoo.cn/ruanjian/886439.html，嗨游网一个专业手游免费下载攻略知识分享平台，本站部分内容来自网络分享，不对内容负责，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
