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

作者: C_Z_Q_ | 来源:发表于2020-03-08 20:13 被阅读0次

目标

audio音频
video视频

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>

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