HTML视频：视频播放网页_播放视频网页_Bin今天学习了嘛的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

谦和的猕猴桃 · katharine ...· 4 月前 ·

个性的小蝌蚪 · 请求的资源上没有'Access-Contro ...· 1 年前 ·

鬼畜的太阳 · unsupported GNU ...· 1 年前 ·

健壮的围巾 · jenkins nohup 启动失败原因 ...· 1 年前 ·

我们可以使用 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>
    <meta charset="UTF-8" />
    <title>HTML - 视频</title>
</head>
    <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>
    <p align="center" style="color:grey;">HTML5 video 播放示例</p>
    <p align="center" style="color:grey;"><small>注意：视频控件显示效果在不同浏览器中有些许差别。</small></p>
</div>
</body>
                    这HTML视频：视频播放网页任务描述相关知识使用HTML5 video元素播放属性嵌入视频网站播放使用超链接播放任务要求任务描述本关任务是编写一个在线播放的视频网页，你将通过本关学习HTML播放视频的多种方式。本关网页显示效果如下图所示：相关知识使用HTML5 video元素播放我们可以使用 HTML5 &lt;video&gt; 元素来进行播放。通常我们可以配合加入&lt;object&gt;和&lt;embed&gt;。例如：&lt;video width="550" controls