作者  宁波网站制作团队——泊浮科技  
发布于  2017-10-11 14:58  

<video> 标签无法播放视频的原因

        在现在这个访客并不想看太多文字的时代里,图片和视频是常用的手段让访客短时间内获取信息的手段。HTML5的video标签是一个十分实用的标签。它的作用是插入视频。然而在使用video中会遇到一些问题,那么我们泊浮科技在这里介绍一下<video>标签。

        在HTML5之前,要是想在网页中插入视频,就得使用flash来完成或是使用嵌入式页面,目前来看呢,flash确实已经快走到尽头了,嵌入式页面使用虽然不是很困难,但是使用起来有些复杂。<video>是一个很好的解决插入视频的方案。

        如何使用<video>标签

        在HTML中想使用<video>标签使用起来十分的简便,以W3school中的例子来看:

    <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

        就是这么简单的一行代码,就能使用<video>标签了。

        

        <video>标签支持的视频格式和编码

        关于<video>标签所支持的视频格式和编码:

        MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

        WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

        Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

        通过上面的信息我们会发现只有h264编码的MP4视频(MPEG-LA公司)、VP8编码的webm格式的视频(Google公司)和Theora编码的ogg格式的视频(iTouch开发)可以支持html5的<video>标签。若是发现自己放入的视频无法播放的时候,可以先看看是不是因为不支持的原因导致的。

        

        浏览器不支持<video>标签怎么办?

        目前市面上的浏览器规范还没有统一,谁也不能肯定自己会不会使用旧版本的IE来浏览网页。那么遇到不支持<video>标签的问题也需要放入考虑中。

        此时,我们要考虑的就是告诉浏览者您的浏览器并不支持视频播放,可以这样写

    <video>您的浏览器不支持该视频的播放。</video>

        这样的话,在视频播放的位置就会出现“您的浏览器不支持该视频的播放”这样的提示了。



        <video>标签的拓展参数

        接下来我们将介绍一下<video>的拓展参数。

        src:要播放视频的url

        autoplay :出现该属性,视频在就绪后将自动播放,用法:autoplay="autoplay"

        controls :出现该属性将会向用户显示控件,如播放按钮等,用法:controls="controls"

        loop:出现该属性,视频将会自动重播,用法:loop="loop"

        height:设置高度  

        width:设置宽度

        preload:视频在页面加载时进行加载并预备播放,用法:preload="auto" 

                    - 当页面加载后载入整个视频;preload="meta" 

                    - 当页面加载后只载入元数据;preload="none" 

                    - 当页面加载后不载入视频

                    注意:若使用了autoplay,则忽略preload


        关于<video>标签就介绍到这里了,希望大家能了解这个标签,并且熟练的使用到日常生活中。


网络营销服务专家、网站建设服务专家、宁波网站建设-宁波泊浮信息科技有限公司

http://www.bofuapp.com/

网络营销服务专家、网站建设服务专家、宁波网站建设-宁波泊浮信息科技有限公司