播放视频

最新推荐文章于 2024-03-08 16:45:08 发布

糯米小辣条

最新推荐文章于 2024-03-08 16:45:08 发布

阅读量793

点赞数

分类专栏： Web practice of Educoder

本文链接：https://blog.csdn.net/m0_47174730/article/details/110672358

版权

Web practice of Educoder 专栏收录该内容

38 篇文章 61 订阅

订阅专栏

第1关：HTML5视频相关的概念
任务描述
本关任务：完成一组有关video元素及属性的概念题。
相关知识
为了完成本关任务，你需要掌握：1.支持video元素的视频格式，2.video元素及其属性。
支持video元素的视频格式
HTML5使用<video>元素用来播放视频，目前<video>元素支持三种视频编码。
MP4：这是一种具有H.264视频编码和AAC音频编码的格式
WebM：这是一种具有VP8视频编码和Vorbis音频编码的格式
Ogg：是一种具有Theora视频编码和Vorbis音频编码的格式。
HTML5视频在浏览器中的支持情况如下图所示：
在这里插入图片描述
一般提供ogg和mp4格式，就可以支持所有主流浏览器了。
video元素及其属性
使用video元素播放视频，也不需要使用任何插件，只需支持 HTML5 的浏览器即可。基本格式如下：

<video src="…" controls="controls"></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>

开始你的任务吧，祝你成功！
参考答案：
在这里插入图片描述

第2关：播放视频
任务描述
本关任务：编写一个播放指定视频的网页。
相关知识
为了完成本关任务，你需要掌握：video元素及其属性
运用video元素播放视频示例
在HTML5中，使用标签来播放视频，在该标签中可通过src属性设置视频文件的url，通过controls属性添加播放控件，添加autoplay属性可在视频加载后自动播放。例如：

<video src="http://vjs.zencdn.net/v/oceans.mp4" controls="controls" autoplay="autoplay" width="400" height="240">
</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>
    <meta charset="UTF-8" />
    <title>HTML5-视频</title>
 </head>
 <body>
   <h1 align="center">我和我的祖国</h1>
   <br/>
   <div align="center">
    <!-- ********* Begin ********* -->
    <video src="https://www.educoder.net/api/attachments/1248122" controls="controls" autoplay="autoplay" width="450" height="260">
    你的浏览器不支持该视频格式
    </video>    
    <!-- ********* End ********* -->
    </div>
 </body>
</html>

糯米小辣条

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
播放视频

第1关：HTML5视频相关的概念任务描述本关任务：完成一组有关video元素及属性的概念题。相关知识为了完成本关任务，你需要掌握：1.支持video元素的视频格式，2.video元素及其属性。支持video元素的视频格式HTML5使用<video>元素用来播放视频，目前<video>元素支持三种视频编码。MP4：这是一种具有H.264视频编码和AAC音频编码的格式WebM：这是一种具有VP8视频编码和Vorbis音频编码的格式Ogg：是一种具有Theora视频编码和
复制链接

扫一扫

专栏目录