迅闻网
让更多人看到你

html5 video(video标签属性)

  html5video

有必定的参考价值,有需求的朋友能够参考一下,希望对你有所协助。
1
标签所支撑的视频格局和编码:
MP4=MPEG4文件运用H264视频编解码器和AAC音频编解码器
WebM=WebM文件运用VP8视频编解码器和Vorbis音频编解码器
Ogg=Ogg文件运用Theora视频编解码器和Vorbis音频编解码器
经过上面的信息咱们会发现只有h264编码的MP4视频(MPEG-LA公司)、VP8编码的webm格局的视频(Google公司)和Theora编码的ogg格局的视频(iTouch开发)能够支撑html5的标签。
假如浏览器不支撑video标签怎么办?
比方IE浏览器还有老版本的浏览器对html5的支撑不太好,当用户用这些浏览器翻开咱们带有视频的网页怎么办呢?
咱们能够把代码这样写:
您的浏览器不支撑播映该视频!
这样在不支撑html5的浏览器中就会提示“您的浏览器不支撑播映该视频!”啦!
关于video标签的扩展参数阐明:
video元素允许多个source元素。source元素能够链接不同的视频文件。浏览器将运用第一个可识别的格局,这样咱们只需多准备几个不同格局的视频就能够了。
用法:
您的浏览器不支撑此种视频格局。
autoplay:呈现该特点意味着视频在就绪后将自动播映,用法:autoplay=”autoplay”
controls:呈现该特点意味着向用户显示控件,如播映按钮等,用法:controls=”controls”
height:设置高度
width:设置宽度
loop:自动重播,用法:loop=”loop”
preload:视频在页面加载时进行加载并准备播映,用法:preload=”auto”-当页面加载后载入整个视频;preload=”meta”-当页面加载后只载入元数据;preload=”none”-当页面加载后不载入视频。注意:若运用了autoplay,则忽略preload
src:要播映视频的url
关于标签我就介绍到这儿,相信我们都对这个标签有了深刻的了解!

html

video标签属性

现在假如要在页面中运用video标签,需求考虑三种状况,支撑OggTheora或许VP8(假如这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支撑H.264的(Safari、IE9、Chrome),都不支撑的(IE6、7、8)。好吧,现在让我们从技能层面来认识HTML5的视频,包括video标签的运用,视频对象能够用到的前言特点和办法,以及前言事件。转自这儿
Video标签的运用
Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个特点,以及一个内部运用的标签。Video标签内除了能够包括标签外,还能够包括当指定的视频都不能播映时,回来的内容。
src特点和poster特点
你能幻想src特点是用来干啥的。跟标签的相同,这个特点用于指定视频的地址。而poster特点用于指定一张图片,在当前视频数据无效时显现(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。
preload特点
这个特点也能通过姓名了解用途,此特点用于界说视频是否预加载。特点有三个可挑选的值:none、metadata、auto。假如不运用此特点,默以为auto。
None:不进行预加载。运用此特点值,可能是页面制作者以为用户不希望此视频,或许减少HTTP请求。
Metadata:部分预加载。运用此特点值,代表页面制作者以为用户不希望此视频,但为用户提供一些元数据(包括尺度,榜首帧,曲目列表,持续时间等等)。
Auto:悉数预加载。
autoplay特点
又是一个看姓名知道用途的特点。Autoplay特点用于设置视频是否自动播映,是一个布尔特点。当呈现时,表明自动播映,去掉是表明不自动播映。
留意,HTML中布尔特点的值不是true和false。正确的用法是,在标签中运用此特点表明true,此时特点要么没有值,要么其值恒等于他的姓名(此处,自动播映为或许);而在标签中不运用此特点表明false(此处不进行自动播映为)。
loop特点
一望而知,loop特点用于指定视频是否循环播映,同样是一个布尔特点。
controls特点
Controls特点用于向浏览器指明页面制作者没有运用脚本生成播映操控器,需求浏览器启用本身的播映操控栏。
操控栏须包括播映暂停操控,播映进度操控,音量操控等等。
每个浏览器默许的播映操控栏在界面上不相同。由于我浏览器的怪异问题,Firefox和Safari的Video标签不正常,所以这两个只能在网上找截图了。
width特点和height特点
归于标签的通用特点了,这个不用多说。
source标签
Source标签用于给媒体(由于audio标签同样能够包括此标签,所以这儿用媒体,而不是视频)指定多个可挑选的(浏览器终究只能选一个)文件地址,且只能在媒体标签没有运用src特点时运用。
浏览器按source标签的顺序检测标签指定的视频是否能够播映(可能是视频格式不支撑,视频不存在等等),假如不能播映,换下一个。此办法多用于兼容不同的浏览器。Source标签本身不代表任何意义,不能单独呈现。
此标签包括src、type、media三个特点。
src特点:用于指定媒体的地址,和video标签的相同。
Type特点:用于阐明src特点指定媒体的类型,协助浏览器在获取媒体前判断是否支撑此类其他媒体格式。
Media特点:用于阐明媒体在何种前言中运用,不设置时默许值为all,表明支撑一切前言。你想到
一个完整的例子
这段代码在页面中界说了一个视频,此视频的预览图为poster的特点值,显现浏览器的默许媒体操控栏,预加载视频的元数据,循环播映,宽度为900像素,高度为240像素。
榜首挑选视频地址为榜首个source标签的src特点值,视频类别为Ogg视频,视频编码译码器为Theora,音频编码译码器为Vorbis,播映媒介为显现器;第二挑选视频地址不再累述。假如你还要兼容IE的话,能够在最后一个source标签后再加上Flash播映器的标签集,或许运用一点JavaScript代码。

未经允许不得转载:迅闻网 » html5 video(video标签属性)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页