【HTML】讲讲HTML5视频播放的方式
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
【HTML】讲讲HTML5视频播放的方式
引言
github【HTML】讲讲HTML5视频播放的方式
内容速递看了本文您能了解到的知识
想要网页播放视频再也不需要使用插件了HTML本身就支持而且更加稳定
上节讲了HTML5的音频播放和音频播放一样需要借助flash才能在网页上使用视频。随着HTML5出来以后就不需要借助flash了本身可以通过video标签支持。
1、HTML5视频的播放方式
在 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菜鸟教程等
如果你感觉对你有帮助的话不妨给我点赞鼓励一下好文记得收藏哟关注我一起成长
幸好我在感谢你来
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |