前端设计

html5多媒体标签之video标签

2024-10-30

一,video标签的基本属性

<!--

    什么是video标签

    1,格式:

    <video  src=""></video>


    基本属性:

    src:用于播放视频地址,包括url和本地视频

    autoplay:自动播放视频

    controls:视频播放控制条(时间显示,进度条,声音等)

    poster:视频站位图片

    loop:循环播放,一般用于小广告播放,一遍一遍的播放(一般只和自动播放属性一起用)

    preload:预加载视频

    muted:静音模式

    width:视频播放器的宽度,只设置宽度可以实现等比缩放

    height:视频播放器的高度,只设置高度度可以实现等比缩放

-->


<video src="http://jumpjoy3d.9-lin.com/mp4/21003.mp4"

       preload="auto"

       controls="controls"

       poster="btn.png"

       width="500">

</video>

<!--<video src="http://www.duoduozhan.cn/1.mp4"-->

       <!--autoplay="autoplay"-->

       <!--loop="loop">-->

<!--</video>-->


二,video标签的第二种格式

<!--

    第二种格式:

    <video>

        <source src="" type="">

    </video>


    由于视频数据非常重要的,所以五大浏览器都不愿意使用别人的视频格式。那么w3c为了解决了这个问题,就推出了这种格式。

    注意点:

    1,其他的属性和第一种格式是一样的

    2,虽然通过第二种video格式可以解决大部分浏览器播放不同视频的问题,但是还不能解决过去浏览器播放视频问题,那么以后可以通过js的一个框架叫做html5media来实现

-->

<video>

    <source src="http://www.duoduozhan.cn/1.mp4" type="video/mp4">

    <source src="http://www.duoduozhan.cn/1.ogg" type="video/ogg">

    <source src="http://www.duoduozhan.cn/1.webm" type="video/webm">

</video>