使用HTML5<video>标签如何在网页中插入视频

更新时间:2019-09-04 20:33:41 来源:青锋建站 作者:青锋建网站
  在H5出现以前在网页中插入视频要使用FLASH插件功能,由于浏览器不会自动加载FLASH插件,因此会出现黑屏的现象,对浏览体验非常不好,以下是青锋建站给大家分享的,如何使用HTML5<video>标签在网页中插入视频。

h5video标签如何提高兼容性:

  要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。video 元素允许多个 source 元素,从而可以链接不同的视频文件来达到支持不同浏览器的目标,浏览器将使用第一个可识别的格式。

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

video标签对浏览器支持

  Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签,Internet Explorer 8 以及更早的版本不支持 <video> 标签。
  当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件、MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件、WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。Internet Explorer 8 不支持 video 元素。在 IE9 中,将提供对使用 MPEG4 的 video 元素的支持。

video标签支持的属性

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
crossorigin   如何处理crossorigin请求元素
poster   海报框架显示之前,视频播放
muted   是否静音的媒体资源默认
  以上就是青锋建站给大家分享的使用HTML5<video>标签如何在网页中插入视频,青锋建站,提供专业的高品质网站制作服务,包括网站建设,SEO,网络营销,PHP开发,网站建设知名品牌,全国接单,为企业构建强有力的营销平台。


					

转载请注明来源网址:青锋建站-http://www.sjzphp.com/webdis/H5video.html

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有