HTML视频：视频播放网页

阳光穿透心脏的1/2处 2021-05-16 20:37 833阅读 0赞

### 这HTML视频：视频播放网页 ###

*  任务描述
 *  相关知识
 *   *  使用HTML5 video元素播放
     *   *  属性
     *  嵌入视频网站播放
     *  使用超链接播放
 *  任务要求

# 任务描述 #

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

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

# 相关知识 #

## 使用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>`元素兼容性较强。

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

### 属性 ###

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

## 嵌入视频网站播放 ##

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

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

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

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

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

显示效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]

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

提示：

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

## 使用超链接播放 ##

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

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]

# 任务要求 #

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

*  科技，始终来源于人性。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]  
    **代码文件：**

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/73052be0299a4450a1a7fd5fb6c2640e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/21479f5da2964d98bb6cade80af3bd08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20210516/1ca6f60b280a42119fe934c12b53313e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20210516/db8c0dfe43384a498a53ef26ab97d276.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: /images/20210516/25895f66cd73429086fec90d8dc4a946.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]: /images/20210516/9dfd6a798aff492a8c6691d36fe2ffe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]: /images/20210516/df4b293cc7d24071addb186a30ff27ce.png