腾讯云点播TCPlayer获取当前倍速，接着上次播放，已经看过的可以拖动回看，未看过的不能跳跃看，学习系统开发

最新推荐文章于 2024-03-08 13:26:24 发布

AF01

最新推荐文章于 2024-03-08 13:26:24 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签：腾讯云云计算 javascript

本文链接：https://blog.csdn.net/songJunFeng1/article/details/121973110

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

腾讯云点播TCPlayer获取当前倍速，接着上次播放，已经看过的可以拖动回看，未看过的不能跳跃看，学习系统开发难点解决方案.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title>腾讯云视频点播示例</title>
    <!-- 引入播放器 css 文件 -->
    <!-- <link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet" /> -->
    <link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.css" rel="stylesheet">
    <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
    <!--[if lt IE 9]>
  <![endif]-->
    <!-- <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script> -->
    <!-- 如果需要在 Chrome Firefox 等现代浏览器中通过H5播放hls，需要引入 hls.js -->
    <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
    <!-- 引入播放器 js 文件 -->
    <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
    <!-- 示例 CSS 样式可自行删除 -->
</head>

<body>
    <!-- 设置播放器容器 -->
    当前最远播放距离为：<span id="playFast"></span>
    <video id="player-container-id" preload="auto" width="960" height="540" playsinline webkit-playsinline>
</video>
    <button class="btn"> 按钮</button>
    <script>
        var options = {
            playbackRates: [0.75, 1, 1.25, 1.5, 2],
            controlBar: {
                progressControl: true
            }
        };
        var player = TCPlayer('player-container-id', options); // player-container-id 为播放器容器 ID，必须与 html 中一致
        player.src('https://vd3.bdstatic.com/mda-mjp3sxs69krni5nw/540p/h264_cae/1635043238343290962/mda-mjp3sxs69krni5nw.mp4?v_from_s=hkapp-haokan-hnb&auth_key=1638934364-0-0-251b4eb39a701b5acd6ae08819a40600&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=&klogid=0164148039'); // url 播放地址
        // var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器 ID，必须与 html 中一致
        //     fileID: '387702292338257074', // 请传入需要播放的视频 fileID（必须）
        //     appID: 'SC1320' // 请传入点播账号的 appID（必须）
        // });
        let currentTimeLast = 0;
        let fastPlay = 100;
        document.getElementById('playFast').innerHTML = fastPlay + '秒'
        setInterval(() => {
            currentTimeLast = parseInt(player.currentTime());
            fastPlay > currentTimeLast ? "" : fastPlay = currentTimeLast;
            document.getElementById('playFast').innerHTML = fastPlay + '秒';
        }, 1000);
        player.on('seeking', function(res) {
            let currentTimeNum = 0;
            currentTimeNum = parseInt(player.currentTime());
            console.log(currentTimeNum);
            if (currentTimeNum > fastPlay) {
                player.currentTime(currentTimeLast);
                console.log('player.currentTime();', player.currentTime());
            } else {
                console.log('player.currentTime();', player.currentTime());
            }
            console.log(res);
        });
        player.on('play', function(res) {
            console.log(res);
            let currentTimeNum = 0;

            currentTimeNum = player.currentTime();
            console.log(currentTimeNum);
        });
        let btn = document.querySelector('.btn');
        btn.addEventListener('click', () => {
            // player.pause();
            // let num = 0;
            // num = player.duration();
            // console.log(num);
            let currentTimeNum = 0;

            currentTimeNum = player.currentTime();
            console.log(currentTimeNum);
        })
        player.on('ratechange', function(res) {

            // console.log(res, res.target.outerText, res.target.innerText, 'ratechange');
            let str = res.target.outerText;
            let str1 = str.substring(str.indexOf('选择') + 3).toString();
            var reg = new RegExp('\n', 'g')
            var str2 = str1.replace(reg, '');
            let arr1 = str2.split('x').sort();
            let arr2 = arr1.filter(ele => !isNaN(ele));
            let rate = arr2[arr2.length - 1];
            console.log(rate, '当前倍速');

        });
    </script>
</body>

</html>

AF01

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
腾讯云点播TCPlayer获取当前倍速，接着上次播放，已经看过的可以拖动回看，未看过的不能跳跃看，学习系统开发

腾讯云点播TCPlayer获取当前倍速，接着上次播放，已经看过的可以拖动回看，未看过的不能跳跃看，学习系统开发难点解决方案.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="vi.
复制链接

扫一扫