HTML视频：视频播放网页

最新推荐文章于 2023-09-22 09:33:11 发布

少年游四方

最新推荐文章于 2023-09-22 09:33:11 发布

阅读量1.9w

点赞数 20

分类专栏： # Web技术应用基础-HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_45823118/article/details/114907302

版权

Web技术应用基础-HTML 专栏收录该内容

18 篇文章 58 订阅

订阅专栏

这HTML视频：视频播放网页

任务描述
相关知识
任务要求

任务描述

本关任务是编写一个在线播放的视频网页，你将通过本关学习HTML播放视频的多种方式。

本关网页显示效果如下图所示：
在这里插入图片描述

相关知识

使用HTML5 video元素播放

我们可以使用 HTML5 <video> 元素来进行播放。通常我们可以配合加入<object>和<embed>。

例如：

<video width="550" controls="controls">
        <source src="./video/Sail-Away.mp4" type="video/mp4" />
        <source src="./video/Sail-Away.ogv" type="video/ogv" />
        <source src="./video/Sail-Away.webm" type="video/webm" />
        <object data="./video/Sail-Away.mp4" width="320" height="240">
        <embed src="./video/Sail-Away.swf" width="320" height="240" />

            你的浏览器不支持该视频格式。 Your browser does not support this video format.
        </object>
    </video>

在本例中，首先，HTML5 <video> 元素会尝试以 mp4、ogg 或 webm 格式中的一种来播放视频。如果失败，代码将回退尝试 <embed> 元素。

提示：

<object>和<embed>元素都可以用于加载Flash视频，只是兼容性不同。
<object>主要应用于支持ActiveX控件的浏览器，而<embed>元素兼容性较强。

不同的播放器支持不同的视频格式。具体如下表所示：
在这里插入图片描述
目前，我们在进行开发时，至少需要为视频提供两种格式 (MP4 和 WebM)，才能保证所有兼容 HTML5 的浏览器都可以播放。

属性

如同<audio>元素，<video>也有类似的属性：
在这里插入图片描述

嵌入视频网站播放

我们也可以将视频上传到常见的视频网站上，例如优酷、爱奇艺、腾讯视频等，这些网站都会提供嵌入到网页中的HTML代码。

这样做的好处是，不用我们自己将视频转化为多种格式，浏览器的兼容性更好。

例如，我们将视频上传到优酷之后，在视频页面点击分享，将提供三张方式嵌入页面中：
在这里插入图片描述

第三种方式，通过<embed>标签，嵌入Flash视频。缺点是不支持没有Flash的网页，例如iPad、iPhone。

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

通常我们推荐大家使用第一种方式，通过<iframe>标签嵌入到网页中，因为这样能够支持没有Flash的网页。

<iframe height=268 width=400 src='http://player.youku.com/embed/XMjk4MTI3MjY0MA==' frameborder=0 'allowfullscreen'></iframe>

显示效果如下：

在这里插入图片描述

视频的大小，可以通过height与width属性指定。

提示：

实际上，Adobe 公司已经宣布，将于2020年停止对Flash的更新与支持。

使用超链接播放

同音频播放类似，使用使用超链接的方式，浏览器会自动识别视频文件，然后起用“辅助应用程序”来播放视频文件。

<a href="./video/Sail-Away.mp4" target="_blank">远航.mp4</a>

效果如下：
在这里插入图片描述

任务要求

补全第10行和第18行的<video>标签；
设置视频宽度为550;
添加视频控件control属性；
添加source属性，加入webm格式的文件链接。

科技，始终来源于人性。

代码文件：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML - 视频</title>
</head>

<body>    
    <h1 align="center">扬帆起航</h1>
    
    <video width="550"  autoplay loop control="control">
        <source src="./video/Sail-Away.mp4" type="video/mp4" />
        <source src="./video/Sail-Away.ogv" type="video/ogv" />
        <source src="./video/Sail-Away.webm" type="video/webm"/>
        <object data="./video/Sail-Away.mp4" width="320" height="240">
        <embed src="./video/Sail-Away.swf" width="320" height="240" />
            你的浏览器不支持该视频格式。Your browser does not support this video format.
        </object>
    </video>
    <br>
    <p align="center" style="color:grey;">HTML5 video 播放示例</p>
    <p align="center" style="color:grey;"><small>注意：视频控件显示效果在不同浏览器中有些许差别。</small></p>
</div>
</body>

少年游四方

关注

20
点赞
踩
129

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML视频：视频播放网页

这HTML视频：视频播放网页任务描述相关知识使用HTML5 video元素播放属性嵌入视频网站播放使用超链接播放任务要求任务描述本关任务是编写一个在线播放的视频网页，你将通过本关学习HTML播放视频的多种方式。本关网页显示效果如下图所示：相关知识使用HTML5 video元素播放我们可以使用 HTML5 <video> 元素来进行播放。通常我们可以配合加入<object>和<embed>。例如：<video width="550" controls
复制链接

扫一扫