h5 video元素的 api使用demo

eshineLau

于 2024-04-19 18:37:50 发布

阅读量135

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/u010564801/article/details/137974262

版权

一个h5 video元素的 api使用demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ios微信内拉流测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
</head>
<body>
<script>
    new VConsole();
    console.log('Hello world');
</script>
<video id="video"
       src="https://hls-stg3-cdn.itp-live.pingan.com.cn/live238/_163739_359982.m3u8"
       width="300" 
       webkit-playsinline="webkit-playsinline" 
       playsinline="playsinline"
       controls="controls">不支持
</video>
<input type="button" id="playButton" onClick="playOrPauseVideo()" value="播放"/>
</body>
<script>
    function playOrPauseVideo() {
        var video = document.getElementById("video");
        //使用事件监听方式捕捉事件
        console.log('src', video.src)
        if (video.paused) {
            video.play();
            document.getElementById("playButton").value = "暂停";
        } else {
            video.pause();
            document.getElementById("playButton").value = "播放";
        }
        // 1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时
        video.addEventListener('loadstart', function (e) {
            console.log('提示视频的元数据已加载')
            console.log(e)
            console.log(video.duration)            // NaN
        })

        // 2、durationchange：时长变化。当指定的音频/视频的时长数据发生变化时触发，加载后，时长由 NaN 变为音频/视频的实际时长
        video.addEventListener('durationchange', function (e) {
            console.log('提示视频的时长已改变')
            console.log(e)
            console.log(video.duration)           // 528.981333   视频的实际时长（单位：秒）
        })

        // 3、loadedmetadata ：元数据加载。当指定的音频/视频的元数据已加载时触发，元数据包括：时长、尺寸（仅视频）以及文本轨道
        video.addEventListener('loadedmetadata', function (e) {
            console.log('提示视频的元数据已加载')
            console.log(e)
        })

        // 4、loadeddata：视频下载监听。当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时触发
        video.addEventListener('loadeddata', function (e) {
            console.log('提示当前帧的数据是可用的')
            console.log(e)
        })

        // 5、progress：浏览器下载监听。当浏览器正在下载指定的音频/视频时触发
        video.addEventListener('progress', function (e) {
            console.log('提示视频正在下载中')
            console.log(e)
        })

        // 6、canplay：可播放监听。当浏览器能够开始播放指定的音频/视频时触发
        video.addEventListener('canplay', function (e) {
            console.log('提示该视频已准备好开始播放')
            console.log(e)
        })

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

        // 8、play：播放监听
        video.addEventListener('play', function (e) {
            console.log('提示该视频正在播放中')
            console.log(e)
        })

        // 9、pause：暂停监听
        video.addEventListener('pause', function (e) {
            console.log('暂停播放')
            console.log(e)
        })

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

        // 11、seeked：查找结束。当用户已经移动/跳跃到视频中新的位置时触发
        video.addEventListener('seeked', function (e) {
            console.log('进度条已经移动到了新的位置')
            console.log(e)
        })

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

        // 13、playing：当视频在已因缓冲而暂停或停止后已就绪时触发
        video.addEventListener('playing', function (e) {
            console.log('playing')
            console.log(e)
        })

        // 14、timeupdate：目前的播放位置已更改时，播放时间更新
        video.addEventListener('timeupdate', function (e) {
            console.log('timeupdate')
            console.log(e)
        })

        // 15、ended：播放结束
        video.addEventListener('ended', function (e) {
            console.log('视频播放完了')
            console.log(e)
        })

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

        // 17、volumechange：当音量更改时
        video.addEventListener('volumechange', function (e) {
            console.log('volumechange')
            console.log(e)
        })

        // 18、stalled：当浏览器尝试获取媒体数据，但数据不可用时
        video.addEventListener('stalled', function (e) {
            console.log('stalled')
            console.log(e)
        })

        // 19、ratechange：当视频的播放速度已更改时
        video.addEventListener('ratechange', function (e) {
            console.log('ratechange')
            console.log(e)
        })
    }
</script>
</html>