web前端开发与应用——播放视频

最新推荐文章于 2024-05-12 02:59:56 发布

leo Messi 7

最新推荐文章于 2024-05-12 02:59:56 发布

阅读量3.2k

点赞数 1

文章标签：音视频前端 html5

本文链接：https://blog.csdn.net/m0_59742894/article/details/121785264

版权

支持video元素的视频格式

HTML5使用<video>元素用来播放视频，目前<video>元素支持三种视频编码。

MP4：这是一种具有H.264视频编码和AAC音频编码的格式
WebM：这是一种具有VP8视频编码和Vorbis音频编码的格式
Ogg：是一种具有Theora视频编码和Vorbis音频编码的格式。

HTML5视频在浏览器中的支持情况如下图所示：

浏览器对HTML5视频的支持

一般提供ogg和mp4格式，就可以支持所有主流浏览器了。

video元素及其属性

使用video元素播放视频，也不需要使用任何插件，只需支持 HTML5 的浏览器即可。基本格式如下： <video src="…" controls="controls"></video> 在 <video> 和 </video>之间可以放置文本内容，这些文本信息将会被显示在那些不支持 <video> 标签的浏览器中。 video元素常用的属性如下：

src：规定要播放的视频文件的地址
controls：添加该属性，则向用户显示带有播放、暂停和音量调节、全屏的视频控件，不同的浏览器会展示不同样式的控制面板
autoplay：添加该属性，可在视频加载完成后自动播放
loop：添加该属性，可使视频连续播放
preload：用于控制视频的加载方式，该属性有三种取值，当取值为none时,表示不加载；当取值为auto时,表示自动加载，网页加载完就加载整个视频；当取值为metadata时，只载入视频的元数据。
width：设置视频播放器的宽度
height：设置视频播放器的高度

source元素及其属性

<source> 标签称为媒体元素，可为浏览器提供多种媒体格式的资源，以兼容用户的浏览器。 source元素的常用属性如下：

src：规定要播放的视频文件的地址
type:规定媒体资源的MIME类型

用法示例：

<video controls="controls" autoplay="autoplay">
<source src="other/Wildlife.ogv" type="video/ogg">
<source src="other/Wildlife.webm" type="video/webm">
<source src="other/Wildlife.mp4" type="video/mp4">
您的浏览器不支持video元素。
</video>

编程要求

在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.使用HTML5的video元素添加一个视频播放器，在video元素的开始和结束标签之间添加说明文字"你的浏览器不支持该视频格式" 2.播放的视频文件URL为“https://www.educoder.net/api/attachments/1248122” 3.添加autoplay属性，使视频可以自动播放 4.设置视频播放器的宽度为450，高度为260。页面效果如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 align="center">我和我的祖国</h1>

<br/>

<video src="https://www.educoder.net/api/attachments/1248122" autoplay="autoplay" controls="controls" width="450" height="260">你的浏览器不支持该视频格式</videi>

</div>

</body>

</html>

leo Messi 7

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
web前端开发与应用——播放视频

支持video元素的视频格式HTML5使用<video>元素用来播放视频，目前<video>元素支持三种视频编码。MP4：这是一种具有H.264视频编码和AAC音频编码的格式 WebM：这是一种具有VP8视频编码和Vorbis音频编码的格式 Ogg：是一种具有Theora视频编码和Vorbis音频编码的格式。HTML5视频在浏览器中的支持情况如下图所示：一般提供ogg和mp4格式，就可以支持所有主流浏览器了。video元素及其属性使用video元素播放视
复制链接

扫一扫