美文网首页
video、audio属性及事件的使用

video、audio属性及事件的使用

作者: 零基础的前端菜鸡 | 来源:发表于2020-12-03 10:40 被阅读0次

因为videoaudio属性大致相同,直接合并在一起。

另外简单记录一下H5所包含的新特性。

HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素(video支持MP4,WebM 和 Ogg三种格式;audio支持MP3,Ogg和Wav; 浏览器兼容上不支持 IE8及以下版本浏览器)
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

1、属性

  • controls="nodownload" 不支持下载
  • controls="nofullscreen" 不支持全屏
  • autoplay 视频打开后自动播放
  • loop 视频结束后循环播放
  • preload 视频打开后进入预加载模式,不自动播放.若同时设置了autoplay属性,则该属性会被忽略
  • muted 设定默认静音播放,可手动开启
  • poster 贴图, 即打开视频后会在视频显示框内以此图片作为封面

  • currentSrc 获取当前音视频的资源路径
  • currentTime 获取当前音视频播放的时间(即当前播放到的时间位置)
  • duration 获取当前音视频的时间长度
  • volume 获取当前音视频的音量
  • heightwidth 获取当前音视频的宽高尺寸

  • 备用地址切换(如下代码块),写入多个 source后会从第一个source进行加载,若第一个source加载失败则会自动进行切换
<video controls autoplay width="400" height="300" id="_source">
    <source src="test3.mp4" type="video/mp4" />
    <source src="test9.mp4" type="video/mp4" />
    <source src="test-2.mp4" type="video/mp4" />
  </video>
  <script>

分界线表明上方内容属于标签属性,同时适用于进行标签上赋值使用及进行dom操作,中间内容适用于dom操作,下方则是代码编写的方式,具体一些使用在下方的学习所写的Demo源码中写到

2、事件

videoaudio 的事件基本一致,其实根据以往学习的内容,其事件有点类似于一个视频的生命周期,它拥有各个不同时间点的触发事件以及出现各种情况的触发事件,通过addEventListener的方式进行监听,即可在该事件出发时做出相应的处理。详细用法我也放在下面的源码里面了,会有相应注释进行解释。

3、Demo源码

首先源码没有引用jquery,另外呢静态资源是根据自己需要可进行替换的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <header>
            <h1>这是HEADER</h1>
        </header>
        <section>这是SECTION</section>
        <nav>这是NAV</nav>

        <article>这是ARTICLE,下面是视频组件学习</article>
        <div id="videoOper">
            <button type="button" onclick="selectSRC(1)">视频一</button>
            <button type="button" onclick="selectSRC(2)">视频二</button>
        </div>
        <div id="video_demo">
            <video id="video1" width="800" height="500" controls="controls" preload="auto" controlslist="nodownload nofullscreen"
             style="background-color: darkblue;">
                <source src="./Material/videoDemo.mp4" type="video/mp4">
                Your browser does not support the video tag.
                </source>
            </video>
            <img id="adver" src="Material/adv.png">
        </div>
        <div id="videoOper">
            <button type="button" onclick="makeBig()">放大</button>
            <button type="button" onclick="makeSmall()">缩小</button>
            <button type="button" onclick="getTime()">记录时间</button>
            <button type="button" onclick="getSrc()">资源路径</button>
            <button type="button" onclick="makeFront()">快进5s</button>
            <button type="button" onclick="makeBack()">快退5s</button>
        </div>

        <div id="data">
            <table border="0" cellspacing="10" style="border-collapse: collapse; margin: 1rem auto;">

                <tr>
                    <td>时间显示</td>
                    <td>
                        <input type="text" id="TIMERECORDS" value="" />
                    </td>
                </tr>
                <tr>
                    <td>路径显示</td>
                    <td>
                        <input type="text" id="SRCRECORDS" value="" />
                    </td>
                </tr>
            </table>
        </div>

        <footer>
            <h1>这是FOOTER</h1>
        </footer>

        <script type="text/javascript">
            var _self = this;
            var videoDOM = document.getElementById("video1")
            var imgDOM = document.getElementById("adver")
            var timeDOM = document.getElementById("TIMERECORDS");
            var srcDOM = document.getElementById("SRCRECORDS");

            // 放大
            function makeBig() {
                console.log("makeBig");
                let initwidth = videoDOM.width;
                let initheith = videoDOM.height;
                if (initwidth == 1000) {
                    alert("尺寸过大")
                } else {
                    videoDOM.width = initwidth + 200;
                    videoDOM.height = initheith + 100;
                    _self.caculate();
                }
            }

            // 缩小
            function makeSmall() {
                console.log("makeSmall");
                let initwidth = videoDOM.width;
                let initheith = videoDOM.height;
                console.log(initwidth)
                console.log(initheith)
                if (initwidth == 400) {
                    alert("尺寸过小")
                } else {
                    videoDOM.width = initwidth - 200;
                    videoDOM.height = initheith - 100;
                    _self.caculate();
                }
            }

            // 获取当前播放时间
            function getTime() {
                let timeValue = videoDOM.currentTime;
                timeDOM.value = timeValue + "s";
            }

            // 获取当前视频SRC
            function getSrc() {
                let srcValue = videoDOM.currentSrc;
                srcDOM.value = srcValue;
            }

            // 快进
            function makeFront() {
                let timeValue = videoDOM.currentTime;
                if (videoDOM.duration - timeValue < 5) {
                    alert("视频剩余时长不足5s")
                } else {
                    videoDOM.currentTime = timeValue + 5;
                }
            }

            // 快退
            function makeBack() {
                let timeValue = videoDOM.currentTime;
                if (timeValue - 5 < 0) {
                    videoDOM.currentTime = 0;
                } else {
                    videoDOM.currentTime = timeValue - 5;
                }
            }

            // 切换视频
            function selectSRC(params) {
                if (params == 1) {
                    videoDOM.src = "http://127.0.0.1:8848/H5_CSS3_JS/Material/videoDemo.mp4";
                } else {
                    videoDOM.src = "http://127.0.0.1:8848/H5_CSS3_JS/Material/videoDemo2.mp4";
                }
            }

            // 计算广告图大小及位置,以保持居中
            function caculate() {
                let imgWidth = videoDOM.width / 2;
                let imgHeight = videoDOM.height / 2;
                console.log(imgWidth)
                console.log(imgHeight)
                imgDOM.style.width = imgWidth + "px";
                imgDOM.style.height = imgHeight + "px";
                imgDOM.style.top = imgHeight - imgHeight / 2 + "px";
            }


            // 以下是video的事件,有点类似于生命周期

            // 1、loadstart: 视频查找。浏览器开始寻找指定音/视频时,即加载过程开始时
            videoDOM.addEventListener('loadstart', function(e) {
                console.log("视频元数据开始加载!");
                console.log(e);
                _self.caculate();
                console.log("此时还没有视频时长--->", videoDOM.duration)
            })

            // 2、durationchange: 时长变化。即指定音/视频的时长数据改变,变化为音/视频的实际时长
            videoDOM.addEventListener('durationchange', function(e) {
                console.log("视频时长已刷新");
                console.log(e);
                console.log("刷新后的视频时长--->", videoDOM.duration);

                // 3、loadedmetadata: 元数据已加载,
                videoDOM.addEventListener('loadedmetadata')
                console.log('视频的元数据已加载');
                console.log(e);
            })

            // 4、loadeddata: 视频下载监听。当前帧的数据已加载,但是没有足够数据播放下一帧时触发
            videoDOM.addEventListener('loadeddata', function(e) {
                console.log("当前帧数据可用");
                console.log(e);
            })

            // 5、progress: 浏览器下载监听。浏览器正在下载音/视频时触发
            videoDOM.addEventListener('progress', function(e) {
                console.log("视频正在下载中");
                console.log(e);
            })

            // 6、canplay: 可播放监听。浏览器预计能够播放指定的音/视频时触发
            videoDOM.addEventListener('canplay', function(e) {
                console.log("当前视频可进行播放");
                console.log(e);
            })

            // 7、canplaythrough: 可流畅播放。浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
            videoDOM.addEventListener('canplaythrough', function(e) {
                console.log("当前视频可流畅播放");
                console.log(e);
            })

            // 8、play: 播放监听。
            videoDOM.addEventListener('play', function(e) {
                console.log("当前视频正在播放中");
                console.log(e);
                imgDOM.style.display = "none";
            })

            // 9、pause: 暂停监听。
            videoDOM.addEventListener('pause', function(e) {
                console.log("当前视频已暂停");
                console.log(e);
                _self.caculate();
            })

            // 10、seeking: 查找开始。当用户开始移动/跳跃到音/视频中新的位置时触发
            videoDOM, addEventListener('seeking', function(e) {
                alert("移动了进度条");
                console.log(e);
            })

            // 11、seeked: 查找结束。当用户已经移动到新位置时触发
            videoDOM.addBehavior('seeked', function(e) {
                console.log("进度条移动到新位置了");
                console.log(e);
            })

            // 12、waiting: 视频加载等待。当视频由于需要缓冲下一帧而停止、等待时触发
            videoDOM.addEventListener('waiting', function(e) {
                console.log("视频正在加载、等待");
                console.log(e);
            })

            // 13、playing: 当视频因缓冲而暂停或停止后已就绪时触发
            videoDOM.addEventListener('playing', function(e) {
                console.log("正在进行视频缓冲");
                console.log(e);
            })

            // 14、timeupdate: 目前播放位置已更改时,播放时间更新
            videoDOM.addEventListener('timeupdate', function(e) {
                console.log('播放位置变更,时间已更改');
                console.log(e);
                console.log("当前时间节点为", videoDOM.currentTime);
            })

            // 15、ended: 播放结束
            videoDOM.addEventListener('ended', function(e) {
                console.log("视频播放已结束");
                console.log(e);
            })

            // 16、error: 播放错误
            videoDOM.addEventListener('error', function(e) {
                console.log("视频出错了");
                console.log(e);
            })

            // 17、volumechange: 当音量变更时
            videoDOM.addEventListener('volumechange', function(e) {
                console.log("音量变更了");
                console.log(e);
            })

            // 18、stalled: 当浏览器尝试获取媒体数据,但数据不可用时吃法
            videoDOM.addEventListener('stalled', function(e) {
                console.log("媒体数据不可用");
                console.log(e);
            })

            // 19、ratechange: 当视频播放速度收到更改时
            videoDOM.addEventListener('ratechange', function(e) {
                console.log("视频播放速度已更改");
                console.log(e);
            })
        </script>
    </body>
</html>



<style type="text/css">
    header,
    section,
    nav,
    article,
    footer {
        text-align: center;
    }

    article {
        margin: 30px 0 10px 0;
        font-size: 1.25rem;
        font-weight: bold;
        color: mediumblue;
    }

    #video_demo {
        position: relative;
    }

    #video_demo,
    #videoOper {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #videoOper {
        margin: 0.625rem 0;
    }

    #adver {
        position: absolute;
    }
</style>

效果截图
简单的学习效果.png

相关文章

  • video、audio属性及事件的使用

    因为video和audio属性大致相同,直接合并在一起。 另外简单记录一下H5所包含的新特性。 HTML5 中的一...

  • 2.3多媒体播放

    2.3.1两个新增的元素video、audio 与图片标签相同,video、audio均可使用src属性, 另外新...

  • 多媒体标签audio和video

    audio 音频标签 语法 支持的格式 video 视频标签 语法 支持格式 video常用属性、方法、事件 so...

  • 小程序教学十一(媒体组件)

    本章主要介绍微信小程序的camera、audio、video等控件及API使用 Camera相机组件 常用属性 注...

  • audio、video和canvas

    一、video和audio元素的属性、方法、事件 1.标签 :视频标签 :音频标签 2.属性: src :...

  • video标签

    HTML5 Audio/Video 标签,属性,方法,事件汇总https://www.cnblogs.com/ku...

  • video 直播 视频播放

    video.js拥有丰富的插件,使用简单 hls.js小巧,适合直播推流 video标签属性及事件 以下简单介绍事件

  • 八、H5中对音视频的设计

    html5标签 video标签的属性 audio标签的属性 音视频js相关属性 音视频js相关函数 js相关事件

  • HTML5 视频和音频的常用方法

    HTML5 中为视频 video 和音频 audio 元素,提供了属性、方法和事件。这两个元素的常用属性上一节我们...

  • HTML5 视频和音频的常用方法

    HTML5 中为视频 video 和音频 audio 元素,提供了属性、方法和事件。这两个元素的常用属性上一节我们...

网友评论

      本文标题:video、audio属性及事件的使用

      本文链接:https://www.haomeiwen.com/subject/xoopwktx.html