h5新增的多媒体标签-扩展知识

2019-11-29  本文已影响0人  wqjcarnation

目标#

audio

    <audio src="2.mp4" autoplay controls loop>
        当前浏览器不支持audio
    </audio>

video##

    <!-- autoplay controls loop也都可用,除此之外,还有poster属性,控制视频没有加载完时的替代画面 -->
    <video width="800" height="" poster="1.png" controls>
        <source src="2.mp4" type="video/mp4"></source>
        <source src="myvideo.ogv" type="video/ogg"></source>
        <source src="myvideo.webm" type="video/webm"></source>
        <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
            <param name="movie" value="myvideo.swf" />
            <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
        </object>
        当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
    </video>

宽高设置一下就行,另外一个等比例调整即可

注意:
muted 无声播放属性,高版本的chrome设置自动播放时,需要加muted。否则不生效

上一篇 下一篇

猜你喜欢

热点阅读