H5API的媒体元素以及自定义数据属性

最新推荐文章于 2024-05-17 14:32:46 发布

干的漂亮

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量213

点赞数 1

分类专栏： html 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_54671516/article/details/126604050

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video> ，这两个标签是媒体元素，下面分别来演示一下这两个标签的用法。

首先，我们先来了解一下video 的属性和方法

方法使用如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script>
    $(function () {
      // 获取视频标签
      var video = $('video')[0]
      console.log(video);
      // 给这一类按钮绑定点击事件
      $('button').click(function () {
        // 方法 play播放  pause暂停 paused切换，是否是暂停状态 volume控制音量  currentTime当前播放秒数 playbackRate倍速播放
        //   播放视频
        if ($(this).text() === '播放') {
          video.play();
        }
        // 暂停视频
        if ($(this).text() === '暂停') {
          video.pause();
        }
        // 切换，视频是播放进行暂停，视频播放时进行播放
        if ($(this).text() === '切换') {
          console.log(video.paused);
          if (video.paused) {
            video.play();
          } else {
            video.pause();
          }
        }
          //  控制音量加减
          if ($(this).text() === '音量+') {
            // volume阈值0-1
            video.volume += 0.1
            video.volume = (video.volume > 0.9 ? 0.9 : video.volume) + 0.1
          }
          if ($(this).text() === '音量-') {
            // volume阈值0-1
            video.volume -= 0.1
            video.volume = (video.volume < 0.1 ? 0.1 : video.volume) - 0.1
          }
          // 控制视频快进

          if ($(this).text() === '快进') {
            video.currentTime += 10;
          }
          // 控制视频快退
          if ($(this).text() === '快退') {
            video.currentTime -= 10;
          }
        // 倍速播放
        if($(this).text()==='倍速播放'){
          video.playbackRate=0.5
        }
      // 监听视频音量事件
      video.onvolumechange=function(){
        if(this.volume>0.5){
          alert('继续加大音量会损伤听力')
        }
      }
    })
      })
   
  </script>
</head>

<body>
  <!-- 音视频可以设置宽高 -->
  <!-- 属性：constrols代表进度条,autoplay代表自动播放,loop代表循环播放.muted,poster src -->
  <video controls loop muted poster="./音视频/2.jpg" src="./音视频/1.mp4" height="400px"></video>
  <button>播放</button>
  <button>暂停</button>
  <button>切换</button>
  <button>音量+</button>
  <button>音量-</button>
  <button>快进</button>
  <button>快退</button>
  <button>倍速播放</button>
  <audio src="./音视频/1.mp3" autoplay loop></audio>
</body>

</html>

2.audio音频

audio元素与video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致.

<audio src="./音视频/1.mp3" controls loop autoplay></audio>

自定义数据属性

data-xxx 是一类被称为自定义数据属性的属性，它赋予我们在所有HTML元素上嵌入自定义数据属性的能力和可以通过HTML和DOM进行专有数据的交换。所有的属性都可以通过HTMLElement.prototype.dataset来访问.自定义属性都可以保存到dataset中。
获取属性
   document.getAttribute
   $(dom).attr()
   dom.dataset

<script>
        window.onload=function(){
            var div=document.querySelector('#one');
            console.log(div.dataset)
            console.log(div.dataset.id)
            console.log(div.dataset.item)
        }
</script>
  <div id="one" flag='two' data-id='1001' data-item='test'></div>