视频组件-video.min.js

最新推荐文章于 2024-08-20 22:59:20 发布

小壮哥哥

最新推荐文章于 2024-08-20 22:59:20 发布

阅读量4.4k

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/qq_44024168/article/details/123852372

版权

引入JQuery CDN

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

引入video.min.js CDN

<script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"></script>

引入video.min.js CDN

<link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet">

源码文档

<!DOCTYPE html>
<html>
<head>
    <title>小壮哥哥</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link href="//cdn.bootcss.com/video.js/7.0.0-alpha.1/alt/video-js-cdn.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/video.js/7.0.0-alpha.1/video.min.js"></script>
</head>

<body>
    <video id="video-active" class="video-js vjs-big-play-centered" controls preload="none" poster="./image/banner.jpg">
        <source src="./video/douyin.mp4" type="video/mp4">
    </video>
    <div id="current">当前时长:0:00s</div>
    <div id="duration">总时长:0:00s</div>
    <div id="pro"></div>
    <script type="text/javascript">
        var myPlayer = videojs("#video-active", {
            controls: true, //是否显示控制条
            poster: './image/banner.jpg', // 视频封面图地址
            muted: false, // 是否静音
            preload: 'auto', //预加载
            autoplay: false, //是否自动播放
            fluid: false, // 自适应宽高
            loop: false, //是否循环播放
            inactivityTimeout: false,
            language: 'zh-CN', // 设置语言
            controlBar: { // 设置控制条组件
                //  设置控制条里面组件的相关属性及显示与否
                'currentTimeDisplay': true,
                'timeDivider': true,
                'durationDisplay': true,
                'remainingTimeDisplay': false,
                volumePanel: {
                    inline: false,
                },
                /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
                children: [{
                        name: 'playToggle'
                    }, // 播放按钮
                    {
                        name: 'currentTimeDisplay'
                    }, // 当前已播放时间
                    {
                        name: 'progressControl'
                    }, // 播放进度条
                    {
                        name: 'durationDisplay'
                    }, // 总时间
                    { // 倍数播放
                        name: 'playbackRateMenuButton',
                        'playbackRates': [0.5, 1, 1.5, 2, 3]
                    }, {
                        name: 'volumePanel', // 音量控制
                        inline: false, // 不使用水平方式
                    }, {
                        name: 'FullscreenToggle'
                    } // 全屏
                ]
            }

        }, function() { //如果视频资源都解析到了,执行此回调函数
            console.log('视频可以播放了', this);
            myPlayer.width(1200); //设置视频组件宽高
            myPlayer.height(500);
            myPlayer.volume(.5); //设置初始音量
        });

        // 绑定事件
        myPlayer.on("timeupdate", function(event) { //视频正在播放事件
            var currentTime = parseInt(this.currentTime()); //当前时间
            var duration = this.duration(); //视频时常
            var percent = (currentTime / duration * 100).toFixed(0) + "%";
            console.log(percent);
            $("#current").text("当前播放进度:" + parseInt(this.currentTime()) + 's');
            $("#duration").text("视频总进度:" + parseInt(duration) + 's');
            if (currentTime == duration) {
                $("#pro").html("视频播放已完成");
            }

        });

        // myPlayer.on("pause", function() {
        //     alert("视频暂停");
        // })
        // myPlayer.on("play", function() {
        //     alert("视频播放");
        // })
        // myPlayer.on("ended", function(event) {
        //     alert('视频播放完成')
        // })

        var pause = false; //是否暂停
        document.addEventListener('keydown', function(e) {
            if (e.keyCode == 32) {
                pause = !pause;
                if (pause) {
                    myPlayer.pause();

                } else {
                    myPlayer.play();
                }
            }
        })
    </script>
</body>
</html>