• 详解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控件,循环和设置大小属性
  • 相关阅读:
    持续精进,改变自己
    Aqwa 带你掌握船舶与海洋工程水动力理论与工程应用
    Linux系统——Zabbix监控
    K8s部署calico拉取不到镜像
    HamsterBear F1C200s Linux v5.17 RTL8188EUS 适配
    2_5.Linux存储的基本管理
    机器学习网络模型绘图模板
    王道22数据结构课后习题(第二章2.2.3)
    关于 Math.random()生成指定范围内的随机数的公式推导
    论文翻译:2022_Time-Frequency Attention for Monaural Speech Enhancement
  • 原文地址:https://blog.csdn.net/weixin_45809825/article/details/126243515