• 详解HTML5新增的多媒体标签


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

    HTML5新增的多媒体标签

    一:视频

    当前

    浏览器MP4WebMOgg
    IEYESNONO
    ChromeYESYESYES
    FirefoxYES 从Firefox21版本开始Linux系统从Firefox 30开始YESYES
    SafariYESNONO
    OperaYES 从Opera25版本开始YESYES

    1

    2

    3

    4

        "medio/mov_bbb.mp4">

        "medio/mov_bbb.ogg">

        您的浏览器暂不支持

    视频

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

    二:音频

    浏览器MP3WavOgg
    IE 9+YESNONO
    Chrome 6+YESYESYES
    Firefox 3.6+YESYESYES
    Safari 5+YESYESNO
    Opera 10+YESYESYES

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    "en">

       "UTF-8">

       HTML5音频标签

       

       "medio/music.mp3" type="audio/mpeg">

       您的浏览器不支持audio元素

       

       

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

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

    多媒体标签总结

    • 音频标签和视频标签使用方式基本一致
    • 浏览器支持情况不同
    • 谷歌浏览器把音频和视频自动播放禁止了
    • 我们可以给视频标签加muted属性来静音播放视频,音频不可以(可以通过JavaScript来解决)
    • 视频标签是重点,我们经常设置自动播放,不适用conrols控件,循环和设置大小属性
  • 相关阅读:
    信息系统项目管理师 第四版 第1章 信息化发展
    你的数据库到底应该如何存储密码?
    批量处理文件夹及子文件夹下文件名
    C++ opencv实现letterbox
    2022牛客多校#6 C. Forest
    Linux下mysql数据文件转移攻略
    【科研】--计算机领域顶会
    智能语音热水器:置入NRK3301离线语音识别ic 迈向智能家居新时代
    KDZD绝缘油介质损耗电阻率测试仪特点
    python测试开发django-198.bootstrap-formvalidation校验成功发ajax请求
  • 原文地址:https://blog.csdn.net/weixin_45809825/article/details/126243515