扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架。使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flowplayer播放器。虽然,目前web播放器很多,但多数播放器仍为Flash播放器,处理代码上并不简洁。
创新互联公司是一家专业提供开化企业网站建设,专注与网站设计、成都网站制作、HTML5建站、小程序制作等业务。10年已为开化众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
如何使用html5media
1、首先在页面的head部分加入如下脚本
1 script src=""/script
可以通过使用IE条件注释的方法,只在旧版IE浏览器中加载这条JS脚本。
2、然后再使用audio或video添加音频视频就行了
1 !-- 视频媒体标签 --
2
3 video src="iefans.net.mp4" width="320" height="200" controls preload/video
4
5 !-- 音频媒体标签 --
6
7 audio src="iefans.net.mp3" controls preload/audio
8
9 这样便可以在IE8,甚至老掉牙的IE6浏览器中使用audio和video标签了。
像这类为不支持html5标签而出现的JS项目,会随着HTML5浏览器和HTML5的优势展现会越来越多起来。
你用的可能是用的webkit的内核,印象中这个浏览器是双内核的。IE对于audio标签确实是不支持的,到了IE10这个问题才有所改善。
解决的办法是,去下载一个video.js就可以了,这是一个针对低版本IE的HTML5视频支持的解决方案,在书写代码时,使用标准的HTML5写法即可,在IE9及以下版本浏览器里面这个JS会自动生成一个flash播放器,模拟HTML5播放器的效果,这样就不需要为html5的video标签的兼容性而头疼。
我们使用html5的video标签,可以不依赖于任何第三方的插件或控件,直接在浏览器中实现视频播放功能。
在了解了video标签之后,下面我们就使用html5的video标签来实现视频播放。
现在,我们打开浏览器,看一看具体的效果:
为了更好地兼容各种浏览器,你可以为一个video标签添加多个source子标签,每个source标签引用一个不同格式的视频文件。这样,html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放,从而实现兼容多个浏览器的视频播放功能。
注:html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件,暂不支持其他格式的视频文件。此外,不同的html5浏览器支持的视频文件格式也略有不同,这种状况可能会在未来的html5中得以改善。
1、media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的。
该属性用于规定目标 URL 是为特殊设备(比如 iPhone)、语音或打印媒介设计的。
该属性可接受多个值。
只能在 href 属性存在时使用。
该属性是 HTML5 中的新属性。
示例:
a href="att_a_media.asp?output=print" media="screen and (min-width:500px)"
HTML5 a media attribute.
/a
2、第2种情况与媒体查询、响应式设计有关
media 属性定义了应该用于指定每种媒体类型的样式表:
screen 适用于计算机彩色屏幕。
示例:link rel="stylesheet" type="text/css" href="index.css" media="screen" /
html5的video标签只有部分浏览器支持,对于IE只有9.0+以上的版本才支持,所以对于视频播放要做兼容,下载所需要的源文件:html5media.min.js,flowplayer.controls.swfflowplayer.swf即可解决。详细步骤:
1、首先下载所需要的源文件:html5media.min.js,flowplayer.controls.swfflowplayer.swf。
2、然后将解压后的js文档和swf文档放在同一目录下,在head部分引入js文档,
3、然后在要引入视频的位置放入video标签,通常放置在div内
4、width:为视频播放宽度,height:为视频播放高度,如果视频大笑适中这里可以不设置,播放器会自动加载视频的原始大小。
如果视频原始大小太大,但不清楚比例,可以只设置高度或者宽度。另外一个设置为auto自动适应,这样视频不会变形。
如果想要视频自动播放,可在video标签中加入autoplay标签。
5、src为视频源文件的路径,poster为视频播放前显示的图片。为播放切换的自然,这里可以设置成视频播放的第一个画面截图。
preload:为预加载视频,设置为auto代表自动加载。
source标签可以省略,但是video标签内的src属性不能省略,如果省略,在IE浏览器中会报错。
所以最后精简后的源码可以如下图所示这样。
6、如果调试过程中,其他浏览器没有问题,但是ie总是有问题的话,清空ie浏览器的缓存再调试。清空缓存步骤如下,先找到Internet工具
7、进入后,点击浏览历史下面的删除按钮。
8、清除如下内容即可,完成后,再用IE刷新页面。
用过,基本用法如下
引入js:
script src=""/script
插入视频:
video src="video.mp4" width="320" height="200" controls preload/video
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流