HTML视频:视频播放网页 |
您所在的位置:网站首页 › css加入视频 › HTML视频:视频播放网页 |
这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 |