h5c3视频音频自定义属性和引入公共样式

最新推荐文章于 2024-07-12 18:44:59 发布

码陨之间

最新推荐文章于 2024-07-12 18:44:59 发布

阅读量32

点赞数

文章标签：音视频 javascript 前端

本文链接：https://blog.csdn.net/ZXK19990928/article/details/132481449

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
        多媒体音频标签
        audio
    -->
    <!-- controls 是否显不默认播放控件 -->
    <!-- autoplay 自动播放(目前很多浏览器不支持自动播放) -->
    <!-- loop 循环播放 -->

    <!-- video 视频 -->
    <!-- autoplay 自动播放（18年开始，谷歌浏览器不支持自动播放） -->
    <!-- muted 静音播放 -->
    <!-- controls 是否显示默认播放控件 -->
    <!-- loop 循环播放 -->
    <!-- width 设置播放窗口宽度 -->
    <!-- height 设置播放窗口的高度 -->
    <!-- 
        data- 自定义属性
        data-自定义的属性名
     -->
   <!-- <ul>
        <li data-index="肉类">肉类</li>
        <li data-index="蔬菜">蔬菜</li>
        <li data-index="水果">水果</li>
        <li data-index="熟食">熟食</li>
        <li data-index="花生豆">花生豆</li>
    </ul> -->
    <!-- data-food-index -->
    <!-- data-index -->
    <!-- 引入外部资源 iframe标签 -->
    <!-- 在当前页面无法用JS获取 iframe 引入过来的元素 -->
    <!-- <iframe src="./09-公共头部.html" frameborder="0" width="100%" height="100%"></iframe> -->
    <button class="btn">点击播放</button>
    <audio
      controls
      autoplay
      class="audio"
      src="https://dl.stream.qqmusic.qq.com/C400000UA33L3tgRFz.m4a?guid=6661798375&vkey=BD4A035245602D0CE8BCE8CCBC58E6FA67D10AF95DE5DE23A6B877A0A08F44225870024BB6333803C28E8A3412C85FD9F9C4B810A1734C82&uin=2811698851&fromtag=120032"
    ></audio>

    <video
      controls
      src="https://dl.stream.qqmusic.qq.com/C400000ypvQg1JgF56.m4a?guid=4519055240&vkey=2B318352B2B4B51ACF1BCFC750DC6B2BAED99561184DACBB2CA7A24B2EB966AFEC302A7CDE64CE6D2B0E9DDAEA4ADAD0D80D0B736236242D&uin=2811698851&fromtag=120032"
    ></video>
    <script>
     //自定义属性
       // var lis = document.getElementsByTagName('li');
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].onclick = function () {
        //         console.log(this.getAttribute('data-index'));
        //         console.log(this.dataset.index);
        //     }
        // }
      var btn = document.getElementsByClassName("btn")[0];
      var audio = document.getElementsByClassName("audio")[0];
      var flag = true;
      btn.onclick = function () {
        if (flag) {
          audio.play();
          flag = false;
        } else {
          audio.pause();
          flag = true;
        }
      };
    </script>
  </body>
</html>