HTML视频:视频播放网页

您所在的位置:网站首页 css加入视频 HTML视频:视频播放网页

HTML视频:视频播放网页

2023-11-12 15:00| 来源: 网络整理| 查看: 265

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

任务描述

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

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

相关知识 使用HTML5 video元素播放

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

例如:

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

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

提示:

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

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

属性

如同元素,也有类似的属性: 在这里插入图片描述

嵌入视频网站播放

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

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

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

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

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

显示效果如下:

在这里插入图片描述

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

提示:

实际上,Adobe 公司已经宣布,将于2020年停止对Flash的更新与支持。 使用超链接播放

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

远航.mp4

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

任务要求 补全第10行和第18行的标签;设置视频宽度为550;添加视频控件control属性;添加source属性,加入webm格式的文件链接。 科技,始终来源于人性。 在这里插入图片描述 代码文件: HTML - 视频 扬帆起航 你的浏览器不支持该视频格式。Your browser does not support this video format. HTML5 video 播放示例 注意:视频控件显示效果在不同浏览器中有些许差别。


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3