HTML5音乐Audio 视频播放video

已于 2022-02-16 21:44:19 修改
阅读量944 收藏
点赞数
分类专栏： html5 文章标签： 音视频 elementui vue.js
于 2022-02-15 19:14:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63327154/article/details/122950625
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 400px;
      border: 1px solid #ddd;
      text-align: center;
      padding-bottom: 10px;
    }

    .container p {
      font-size: 1.3em;
      font-weight: bold;
      text-align: center;
    }

    .container img {
      width: 340px;
      height: 340px;
      border-radius: 50%;
    }

    .container input {
      width: 340px;
      display: block;
      margin: 10px auto;
    }

    .container .time {
      width: 340px;
      height: 30px;
      margin: 0px auto;
    }

    .container .time .left {
      float: left;
    }

    .container .time .right {
      float: right;
    }

    video {
      background-color: black;
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <video id="video" src="./assets//let_it_go.mp4"></video>



  <div class="container">


    <input id="range" type="range" min="0" value="0" max="100">
    <div class="time">
      <span class="left">00:00</span>
      <span class="right">0:00</span>
    </div>

    <button id="btn_play">播放/暂停</button>
    <button id="btn_vp">音量+</button>
    <button id="btn_vm">音量-</button>
    <button id="btn_05">0.5倍速</button>
    <button id="btn_1">1倍速</button>
    <button id="btn_2">2倍速</button>
    <button id="btn_fc">全屏播放</button>
  </div>

  <script src="./assets//moment.js"> </script>
  <script>

    let player = document.getElementById('video')
    
    // 全屏播放
    btn_fc.addEventListener('click',function () {
      //请求全屏显示DOm元素
      player.requestFullscreen()
      })

    player.addEventListener('loadedmetadata', function () {
      let dt = player.duration //总时长
      let dtstr = moment.unix(dt).format('mm:ss')
      let s2 = document.getElementsByClassName('right')[0]
      s2.innerHTML = dtstr
    })

    // 更新播放进度
    range.addEventListener('change', function () {
      console.log(range.volume);
      player.currentTime = range.value
    })

    //更新进度
    player.addEventListener("timeupdate", function () {
      let ct = player.currentTime  //当前时长
      let dt = player.duration //总时长

      console.log(`timeupdate() ct:${ct}dt:${dt}`);
      //更新进度条
      range.max = dt
      range.value = ct
      //更新时间:  当前时间  与 总时长
      let ctstr = moment.unix(ct).format('mm:ss')
      let dtstr = moment.unix(dt).format('mm:ss')
      let s1 = document.getElementsByClassName('left')[0]
      let s2 = document.getElementsByClassName('right')[0]
      s1.innerHTML = ctstr
      s2.innerHTML = dtstr

    })

    //控制i音量
    btn_vm.addEventListener('click', function () {
      player.volume = Math.max(player.volume - 0.1, 0)
      console.log(alyer.volume);
    })
    btn_vp.addEventListener('click', function () {
      player.volume = player.volume + 01
      console.log(alyer.volume);
    })
    //倍数播放
    btn_05.addEventListener('click', function () {
      player.playbackRate = 0.5
    })
    btn_1.addEventListener('click', function () {
      player.playbackRate = 1
    })
    btn_2.addEventListener('click', function () {
      player.playbackRate = 12
    })





    // let btn_play = document.getElementById('btn_play')  dom获取
    //暂停与播放
    btn_play.addEventListener('click', function () {
      if (player.paused) {
        player.play()

      } else {
        player.pause()
      }

    })
  </script>

</body>

</html>

 

 

 案例：写一个小音乐播放器。https://neteasecloudmusicapi.vercel.app/#/?id=license

音乐播放

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 400px;
      border: 1px solid #ddd;
      text-align: center;
      padding-bottom: 10px;
    }

    .container p {
      font-size: 1.3em;
      font-weight: bold;
      text-align: center;
    }

    .container img {
      width: 340px;
      height: 340px;
      border-radius: 50%;
    }

    .container input {
      width: 340px;
      display: block;
      margin: 10px auto;
    }

    .container .time {
      width: 340px;
      height: 30px;
      margin: 0px auto;
    }

    .container .time .left {
      float: left;
    }

    .container .time .right {
      float: right;
    }
  </style>
</head>

<body>
  <div class="container">
    <p>let it go</p>
    <img src="assets/logo.jpg" alt="">
    <input id="range" type="range" min="0" value="0" max="100">
    <div class="time">
      <span class="left">00:00</span>
      <span class="right">0:00</span>
    </div>

    <button id="btn_play">播放/暂停</button>
    <button id="btn_vp">音量+</button>
    <button id="btn_vm">音量-</button>
    <button id="btn_05">0.5倍速</button>
    <button id="btn_1">1倍速</button>
    <button id="btn_2">2倍速</button>
  </div>

  <script src="./assets//moment.js"> </script>
  <script>
    let player = new Audio()//创建一个播放器
    player.src = "./assets/let_it_go.mp3"

    player.addEventListener('loadedmetadata', function () {
      let dt = player.duration //总时长
      let dtstr = moment.unix(dt).format('mm:ss')
      let s2 = document.getElementsByClassName('right')[0]
      s2.innerHTML = dtstr 
    })

    // 更新播放进度
    range.addEventListener('change', function () {
      console.log(range.volume);
      player.currentTime = range.value
    })

    //更新进度
    player.addEventListener("timeupdate", function () {
      let ct = player.currentTime  //当前时长
      let dt = player.duration //总时长

      console.log(`timeupdate() ct:${ct}dt:${dt}`);
      //更新进度条
      range.max = dt
      range.value = ct
      //更新时间:  当前时间  与 总时长
      let ctstr = moment.unix(ct).format('mm:ss')
      let dtstr = moment.unix(dt).format('mm:ss')
      let s1 = document.getElementsByClassName('left')[0]
      let s2 = document.getElementsByClassName('right')[0]
      s1.innerHTML = ctstr
      s2.innerHTML = dtstr

    })

    //控制i音量
    btn_vm.addEventListener('click', function () {
      player.volume = Math.max(player.volume - 0.1, 0)
      console.log(alyer.volume);
    })
    btn_vp.addEventListener('click', function () {
      player.volume = player.volume + 01
      console.log(alyer.volume);
    })
    //倍数播放
    btn_05.addEventListener('click', function () {
      player.playbackRate = 0.5
    })
    btn_1.addEventListener('click', function () {
      player.playbackRate = 1
    })
    btn_2.addEventListener('click', function () {
      player.playbackRate = 2
    })





    // let btn_play = document.getElementById('btn_play')  dom获取
    //暂停与播放
    btn_play.addEventListener('click', function () {
      if (player.paused) {
        player.play()

      } else {
        player.pause()
      }

    })
  </script>

</body>

</html>

MMNHD
关注
专栏目录
HTML音乐播放器
Nicolas_king的博客
07-12 1339
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt; School Cassette Player with HTML5 Audio&lt;/title&gt; &lt;meta charset="UTF-8" /&gt; &am
html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
weixin_42151772的博客
06-07 1286
使用HTML5多媒体，audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频。小知识：视频文件包含了音频轨道，视频轨道和其他一些元数据。当我们播放视频的时候，音频轨道和和视频轨道是绑定在一起同步播放的。元数据部分包含了视频的封面，标题，子标题，字幕等相关信息。一.使用audio元素HTML5中的audio是用来播放声音文件的，支持ogg Vorbis , M...
HTML Audio 播放器指南
最新发布
gitblog_00017的博客
08-28 405
HTML Audio 播放器指南 html-audioWeb audio API pitch shifter项目地址:https://gitcode.com/gh_mirrors/ht/html-audio 项目介绍 本项目html-audio是一个基于纯HTML5实现的音频播放器示例。它展示了如何利用 <audio> 标签及其相关属性来在网页上嵌入并控制音频播放功能。通过这个开源...
HTML简单音乐播放器
热门推荐
路漫漫其修远兮，吾将上下而求索。
03-01 5万+
HTML简单音乐播放器
html简单的音乐播放器
yasinawolaopo的博客
12-01 3441
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>简单的音乐播放器</title> <link rel="stylesheet" href="indexCss.css"> </head> <body> <div class="
基于vue框架，利用html5的audio标签实现音频播放，利用html5的video标签实现视频播放.zip
02-14
本项目结合了Vue与HTML5的Audio和Video标签，为用户提供了一种在网页上实现音频和视频播放的解决方案。 首先，我们来深入了解一下HTML5的Audio标签。Audio标签是HTML5中新增的多媒体元素，允许开发者在网页中嵌入...
HTML5页面音视频在微信和app下自动播放的实现方法
09-28
在描述中提到，由于大部分移动端浏览器默认禁用了audio和video的autoplay功能，且对于用户没有进行任何交互操作的情况下的自动播放请求不予响应，开发者需要另辟蹊径来实现这一功能。文章提到的解决方案主要是通过...
html5 音乐播放器 audio 标签使用概述
01-21
标签属性：src：视频的URLposter：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 <videoid=”media”src=”...
angular播放html5视频,HTML5视频/音频播放器控件使用AngularJS播放和暂停(HTML5 video/audio player control play & pause with ...
weixin_42116596的博客
06-11 860
HTML5视频/音频播放器控件使用AngularJS播放和暂停(HTML5 video/audio player control play & pause with AngularJS)我想用AngularJS控制HTML5音频/视频播放器。 我想玩和暂停那个玩家。 我可以使用jQuery来做到这一点。 但我需要它与AngularJS合作。I want to control HTML5 a...
HTML网页音乐播放器
04-21
HTML网页音乐播放器，支持上下首、快进倒退、随机播放单曲循环等模式。
HTML5音乐播放器
12-23
自己用 html5+css3+javascript+jqurey写的一个音乐播放器，包含功能有列表，歌词同步滚动，进度条拖动等，背景用了一个雪花插件，列表是自己随便做的，喜欢的就下载吧
html5播放视频音乐
wulong710的专栏
09-22 155
播放视频、音乐 参考：https://www.runoob.com/html/html5-video.html <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>脚本</title> <style type="text/css"> #d
HTML 音乐播放器界面
Yuyao_Xu的博客
09-01 1万+
经过了两周的实训，最后两天时间开始这个项目的设计和制作，技术不够成熟，还未能连上数据库，大部分的时间花在了组内成员各页面的整合之上，效果不胜理想。在此先简单做一个总结，记录一些东西。 音乐播放功能 功能描述：点击歌曲名字，出现单曲播放界面，底端播放器进行播放，歌曲名与歌手名显现对应名字，切换页面的同时，歌曲不间断播放，播放按钮点击实现暂停，重播按钮点击实现重播。 歌名设置onclick事件s...
html音乐播放器 利用css和js知识来创建一个音乐播放器（虽然简陋，但是逻辑很容易懂，适合初学者）
m0_72190449的博客
08-16 3475
作为初学者，制作一个网页音乐播放器来提高我们编写代码水平很有用，把你要的歌曲放到src里面就可以了。
最简单的html 音乐播放器
weixin_45221142的博客
03-16 1576
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <audio id="" controls="controls"> <source src...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值