• 技术文章 >web前端 >H5教程

    详解HTML5新增的多媒体标签

    藏色散人藏色散人2022-08-05 16:10:50转载159

    本篇文章给大家介绍HTML常用的多媒体标签及HTML5新增的多媒体标签,希望对需要的朋友有帮助!

    HTML5新增的多媒体标签

    一:视频<video>

    当前<video>元素支持三种视频格式:尽量使用MP4格式

    浏览器MP4WebMOgg
    IEYESNONO
    ChromeYESYESYES
    FirefoxYES 从Firefox21版本开始Linux系统从Firefox 30开始YESYES
    SafariYESNONO
    OperaYES 从Opera25版本开始YESYES
    <video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
        <source src="medio/mov_bbb.mp4">
        <source src="medio/mov_bbb.ogg">
        您的浏览器暂不支持<video>标签播放视频</video>

    视频<video>——常见属性

    属性描述
    autoplayautoplay视频就绪自动播放(谷歌浏览器需添加muted来解决自动播放问题)
    controlscontrols向用户显示播放控件
    widthpixels(像素)设置播放器宽度
    heightpixels(像素)播放器高度
    looploop循环播放
    srcurl视频url地址
    posterimageurl加载等待的话面图片
    mutedmuted静音播放

    二:音频<audio>

    浏览器MP3WavOgg
    IE 9+YESNONO
    Chrome 6+YESYESYES
    Firefox 3.6+YESYESYES
    Safari 5+YESYESNO
    Opera 10+YESYESYES
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>HTML5音频标签</title></head><body>
       <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
       <source src="medio/music.mp3" type="audio/mpeg">
       您的浏览器不支持audio元素</audio>
       </body>
       </html>

    谷歌浏览器把音频和视频自动播放禁止了

    属性描述
    autoplayautoplay自动播放
    controlscontrols向用户显示播放控件
    looploop循环播放
    srcurl视频url地址
    mutedmuted静音播放

    多媒体标签总结

    【相关推荐:css视频教程

    以上就是详解HTML5新增的多媒体标签的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:jianshu,如有侵犯,请联系admin@php.cn删除
    专题推荐:多媒体标签
    上一篇:html5的doctype声明是什么 下一篇:没有了
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• html5 track标签是什么意思?html5 track标签的使用方法介绍• h5新增标签audio与video的使用• html5 video元素支持哪些视频格式• 一文了解CSS3中的新属性object-view-box
    1/1

    PHP中文网