33-视频与音频

最新推荐文章于 2024-07-12 16:27:40 发布

皮卡卡卡

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量100

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44808878/article/details/114973063

版权

js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

第三十三章.视频与音频

1. video标签

  <!--
    src 视频地址
    width height 视频宽高
    controls 显示视频控件
    autoplay 自动播放（前提得加muted静音）
    muted 静音
    loop 循环播放
    poster

  -->
  <video
      src="./视频.mp4"
      width="500" height="400"
      controls

      muted
      loop
      poster="./sherry.png"
  ></video>

1.1 标签属性

src

设置路径。
width/height

设置标签的大小，类似于img，但是不会使视频文件拉伸。
controls

无须值，有该属性则显示视频控制面板。
autoplay

无须值，有该属性则自动播放。chrome为了用户体验不允许自动播放，但是允许静音下自动播放。
muted

无须值，有该属性则静音。
loop

无须值，有该属性则放完之后循环播放（默认是放完了停止）。
poster

设置封面海报，需要指定一个图片地址。
preload

设置页面加载后是否加载视频（当设置了autoplay时，此属性会被忽略）：
- auto - 加载整个视频
- metadata - 加载元数据（视频时长、尺寸大小等）
- none - 不加载视频

1.2 相关API

play() pause()

播放、暂停。
属性

duration – 视频总时长

currentTime – 当前时长

ended – 当前是否是播放完的状态

volume – 声音大小（0~1 之间）

defaultPlaybackRate – 播放速率（1.0正常速，最大2.0）
事件

onplay – 播放时触发（不是持续性触发，每次播放触发一次）

onpause – 暂停时触发

ontimeupdate – 播放进度发生改变时触发

onended – 播放结束时触发

oncanplay – 视频准备就绪，浏览器能够播放时触发

1.3 source

用于兼容，可以通过source指定多个播放源文件，浏览器会依次自动所支持的文件播放。

2. audio标签

与video标签基本一毛一样……

当然，audio不支持 width、height，不支持海报poster，chrome也不支持静音播放（本来就听个响，都静音了还放啥）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin:0;padding:0;font-family:"Microsoft Yahei";}

  </style>
</head>
<body>
  <div>
    <audio src="./audio/35.mp3"></audio>
    <audio src="./audio/41.mp3"></audio>
    <audio src="./audio/42.mp3"></audio>
    <audio src="./audio/43.mp3"></audio>
    <audio src="./audio/44.mp3"></audio>
    <audio src="./audio/45.mp3"></audio>
    <audio src="./audio/46.mp3"></audio>
    <audio src="./audio/47.mp3"></audio>
    <audio src="./audio/48.mp3"></audio>
  </div>
  <script>

    let audio = document.querySelectorAll("audio");

    document.onkeydown = function(e){
      let index = 0;
      switch (e.keyCode) {
        case 81:
          index = 0;
          break;
        case 87:
          index = 1;
          break;
        case 69:
          index = 2;
          break;
        case 82:
          index = 3;
          break;
        case 84:
          index = 4;
          break;
        case 89:
          index = 5;
          break;
        case 85:
          index = 6;
          break;
        case 73:
          index = 7;
          break;
        case 79:
          index = 8;
          break;
      }

      audio[index].currentTime = 0;
      audio[index].play();
    };

  </script>
</body>
</html>

皮卡卡卡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
33-视频与音频

第三十三章.视频与音频1. video标签  <video src="./视频.mp4" width="500" height="400" controls mut
复制链接

扫一扫