wangqianqian
/
video_warehouse


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微电影</title>
    <script src="static/js/vue.js"></script>
    <link href="static/css/video-js.css" rel="stylesheet">
    <script src="static/js/videojs.min.js"></script>
    <script src='static/js/videojs.js'></script>
    <script src="static/js/jquery.min.js"></script>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 100vw;
            height: 100vh;
            text-align: center;
            overflow: hidden;
        }

        .video_list {
            width: 100%;
            height: 100%;
            padding: 30px 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .video_item {
            position: relative;
            width: 32%;
            height: 42%;
        }

        .video_item:last-child,
        .video_item:nth-child(5),
        .video_item:nth-child(4) {
            margin-top: -70px;
        }

        .video_item .poster {
            width: 100%;
            height: 100%;
        }

        .video_item .play {
            width: 80px;
            height: 80px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .player_box {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .video-js .vjs-big-play-button {
            /* 中间大的播放按钮 */
            font-size: 3.5em;
            line-height: 3.5em;
            height: 3.5em;
            width: 3.5em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 2.5em;
            background-color: rgba(115, 133, 159, .5);
            border-width: 0.12em;
            margin-top: -1.25em;
            margin-left: -1.75em;
        }

        /* 中间的播放箭头 */
        .vjs-big-play-button .vjs-icon-placeholder {
            font-size: 1.63em;
        }

        .video-js.vjs-playing .vjs-tech {
            pointer-events: auto;
        }

        /* 视频暂停时显示播放按钮 */
        .video-js.vjs-paused .vjs-big-play-button {

            display: block;
        }

        .video-js {
            /* 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位 */
            font-size: 20px;
        }


        .vjs-slider-bar {
            width: 30px;
        }

        .video-js button {
            outline: none;
        }


        /*添加的退出组件*/
        .vjs-my-components {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 30px;
        }

        .vjs-my-components:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app" class="box">
        <div v-show="showPlayer" class="player_box">
            <video ref='video' id="myVideos" class="video-js vjs-default-skin vjs-big-play-centered "
                style="width:100vw;height:100vh;overflow: hidden;">
                <!-- <source type="video/mp4" :src="videoUrl" /> -->
            </video>
        </div>
        <div class="video_list" v-show="!showPlayer">
            <div class="video_item" v-for="(item,idx) in videoList" :key="item.id"
                @click="idx==videoList.length-1?'':playVideo(idx)">
                <img :src="item.img" alt="" class="poster">
                <img src="https://s1.ax1x.com/2023/05/26/p9b4EPe.png" alt="" class="play"
                    v-if="idx!=videoList.length-1">
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                player: null, //视频播放器
                videoUrl: '', //当前播放的视频资源
                showPlayer: false, //是否显示播放器
                videoList: [// url 视频资源   img  视频背景图
                    { id: 1, url: 'static/mp4/01.mp4', img: 'static/img/01.jpg' },
                    { id: 2, url: 'static/mp4/02.mp4', img: 'static/img/02.jpg' },
                    { id: 3, url: 'static/mp4/03.mp4', img: 'static/img/03.jpg' },
                    { id: 4, url: 'static/mp4/04.mp4', img: 'static/img/04.jpg' },
                    { id: 5, url: 'static/mp4/05.mp4', img: 'static/img/05.jpg' },
                    { id: 6, url: '', img: 'static/img/06.jpg' },
                ],
            },
            methods: {
                // 播放视频
                playVideo(idx) {
                    let _this = this;
                    let list = _this.videoList
                    let i = idx
                    _this.videoUrl = list[i].url
                    _this.showPlayer = true
                    $(function () {
                        _this.$nextTick(() => {
                            _this.player = videojs("myVideos", {
                                autoplay: false, //自动播放
                                controls: true,//控制条
                                language: "en",// 初始化语言
                                preload: "auto",// 预加载
                                sources: [{ src: list[i].url, type: 'video/mp4' }], //视频资源
                                poster: list[i].img, //背景图
                                fluid: true, // 自适应宽高
                                controlBar: {
                                    FullscreenToggle: false,  //隐藏自带全屏按钮
                                    children: [
                                        { name: 'playToggle' }, // 播放按钮
                                        { name: 'currentTimeDisplay' }, // 当前已播放时间
                                        { name: 'progressControl' }, // 播放进度条
                                        { name: 'durationDisplay' }, // 总时间
                                        {
                                            name: 'volumePanel', // 音量控制
                                            inline: false, // 不使用水平方式
                                        },
                                    ]
                                }

                            }, function () {
                                //添加退出按钮 begin
                                var baseComponent = videojs.getComponent('Component')
                                var myComponent = videojs.extend(baseComponent, {
                                    constructor: function (player, options) {
                                        baseComponent.apply(this, arguments)
                                        this.on('click', this.clickIcon)
                                    },
                                    createEl: function () {
                                        var divObj = videojs.dom.createEl('div', {
                                            // Prefixing classes of elements within a player with "vjs-"
                                            // is a convention used in Video.js.
                                            // 给元素加vjs-开头的样式名，是videojs内置样式约定俗成的做法
                                            className: 'vjs-my-components',
                                            innerHTML:
                                                '<span style="font-size:20px;font-weight:bold;">退出</span>'
                                        })
                                        return divObj
                                    },
                                    clickIcon: function () {
                                        //退出全屏
                                        _this.exitFullscreen(videojs('myVideos'))
                                    }
                                })
                                videojs.registerComponent('myComponent', myComponent)
                                // 找到 controlBar 节点，添加控件
                                _this.player.getChild('controlBar').addChild('myComponent')
                                //添加退出按钮 end
                                //监听视频加载
                                this.on("canplaythrough", function () {
                                    this.play()
                                    // console.log("视频源数据加载完成")
                                })
                                //监听播放
                                this.on("playing", function () {
                                    _this.fullScreen(videojs('myVideos'))

                                });
                                //监听播放结束
                                this.on('ended', function () {
                                    i++;
                                    //播放到最后一个
                                    if (i >= list.length - 1) {
                                        //继续从头播放
                                        i = 0;
                                        //回到列表页
                                        // _this.showPlayer = false;
                                        // this.dispose();
                                        // $(".player_box").html('<video  id="myVideos" class="video-js vjs-default-skin vjs-big-play-centered "> <source type="video/mp4" src="" /></video>');
                                        // return
                                    }
                                    var videoObj = list[i];
                                    this.src({ src: videoObj.url });
                                    this.play();
                                })
                            });
                        })

                    });
                },
                //全屏播放
                fullScreen(ele) {
                    if (ele.requestFullscreen) {
                        ele.requestFullscreen();
                    } else if (ele.mozRequestFullScreen) {
                        ele.mozRequestFullScreen();
                    } else if (ele.webkitRequestFullscreen) {
                        ele.webkitRequestFullscreen();
                    } else if (ele.msRequestFullscreen) {
                        ele.msRequestFullscreen();
                    }
                    return true;
                },
                //退出全屏
                exitFullscreen(ele) {
                    if (ele.exitFullScreen) {
                        ele.exitFullScreen();
                    } else if (ele.mozCancelFullScreen) {
                        ele.mozCancelFullScreen();
                    } else if (ele.webkitExitFullscreen) {
                        ele.webkitExitFullscreen();
                    } else if (ele.msExitFullscreen) {
                        ele.msExitFullscreen();
                    } else {
                        this.showPlayer = false;
                        this.player.dispose();
                        $(".player_box").html('<video  id="myVideos" class="video-js vjs-default-skin vjs-big-play-centered "> <source type="video/mp4" src="" /></video>');
                    }
                    return true;
                }
            }
        });
    </script>
    <script>
        //监听是否全屏
        $(window).resize(function () {
            if (checkIsFullScreen()) {
                console.log('进入全屏')
            } else {
                //销毁播放器，显示列表
                if (vm.player) {
                    vm.player.dispose();
                    $(".player_box").html('<video  id="myVideos" class="video-js vjs-default-skin vjs-big-play-centered "> <source type="video/mp4" src="" /></video>');
                }
                vm.showPlayer = false
            }
        });
        //是否全屏
        function checkIsFullScreen() {
            var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
            return isFullScreen == undefined ? false : isFullScreen;
        }

    </script>
    <SCRIPT language="JavaScript">
        //禁止使用右键
        function click() {
            if (event.button == 2) {

            }
        }
        document.onmousedown = click

    </SCRIPT>
</body>

</html>