HTML5 audio 和 video_丝画阁(homeforexchange.cn)

HTML5 audio 和 video

发布时间：2019-03-13 11:05:47编辑：丝画阁阅读（283）

音频和视频共有属性

播放方法：

audio.play();

暂停方法:

audio.pause();

是否暂停属性:

audio.paused;

静音属性:

audio.muted;

音量属性:[ 0 -1 ]

audio.volume;

总时长属性: 单位s

audio.duration;

当前播放进度: 单位s

audio.currentTime;
2.2 视频的封面属性

video.poster = '图片的地址'

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>音频</title>
    </head>
    <body>
       <audio id="audio" src="./video/1.mp3" controls>
       </audio>
       <button id="play">播放</button>
       <button id="pause">暂停</button>
       <button id="muted">静音</button>
       <button id="voiceplus">音量+</button>
       <button id="voicemin">音量-</button>
       <button id="jump">快进</button>

       <script type="text/javascript">
           // 获取元素
           var audio = document.getElementById("audio");
           var play = document.getElementById("play");
           var pause = document.getElementById("pause");
           var muted = document.getElementById("muted");
           var voiceplus = document.getElementById("voiceplus");
           var voicemin = document.getElementById("voicemin");
           var jump = document.getElementById("jump");

           // 播放
           play.onclick = function() {
               audio.play();
           }
           // 暂停
           pause.onclick = function() {
               audio.pause();
           }
           // 静音
           muted.onclick = function() {
               audio.muted = !audio.muted;
           }
           // 音量+
           voiceplus.onclick = function() {
               var volume = ((audio.volume * 10 + 1) / 10).toFixed(1);
               if(volume >= 1) {
                   volume = 1;
               }
               audio.volume = volume;
           }
           // 音量-
           voicemin.onclick = function() {
               var volume = ((audio.volume * 10 - 1) / 10).toFixed(1);
               if(volume <= 0) {
                   volume = 0;
               }
               audio.volume = volume;
           }
           // 快进3秒
           // 所谓的快进是增加3秒
           jump.onclick = function() {
               // 获取当前播放进度(时间单位 s)
               // console.log();
               audio.currentTime += 3;
               // 获取整个视频的时长
               console.log(audio.duration);
           }

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>视频</title>
    </head>
    <body>
       <video id="video" src="./video/2.mp4" controls>
       </video>
       <button id="play">播放</button>
       <button id="pause">暂停</button>
       <button id="muted">静音</button>
       <button id="voiceplus">音量+</button>
       <button id="voicemin">音量-</button>
       <button id="jump">快进</button>

       <script type="text/javascript">
           // 获取元素
           var video = document.getElementById("video");
           var play = document.getElementById("play");
           var pause = document.getElementById("pause");
           var muted = document.getElementById("muted");
           var voiceplus = document.getElementById("voiceplus");
           var voicemin = document.getElementById("voicemin");
           var jump = document.getElementById("jump");
           // 设置封面
           // 如果视频没有封面属性那么会默认使用该视频的第一帧当做封面
           video.poster = "./imgs/timg.jpg"
           // 播放
           play.onclick = function() {
               video.play();
           }
           // 暂停
           pause.onclick = function() {
               video.pause();
           }
           // 静音
           muted.onclick = function() {
               video.muted = !video.muted;
           }
           // 音量+
           voiceplus.onclick = function() {
               var volume = ((video.volume * 10 + 1) / 10).toFixed(1);
               if(volume >= 1) {
                   volume = 1;
               }
               video.volume = volume;
           }
           // 音量-
           voicemin.onclick = function() {
               var volume = ((video.volume * 10 - 1) / 10).toFixed(1);
               if(volume <= 0) {
                   volume = 0;
               }
               video.volume = volume;
           }
           // 快进3秒
           // 所谓的快进是增加3秒
           jump.onclick = function() {
               // 获取当前播放进度(时间单位 s)
               // console.log();
               video.currentTime += 3;
               // 获取整个视频的时长
               console.log(video.duration);
           }

       </script>
    </body>
    </html>
---------------------
作者：MrShyZhang
来源：CSDN
原文：https://blog.csdn.net/thunderevil35/article/details/80656988

关键字：

上一篇：解决linux环境下nohup: redirecting stderr to stdout问题

下一篇：参加Linux云计算培训运维人员最常用166个命令汇总-薪享宏福

HTML5 audio 和 video

最新发布

友情链接