wangqianqian
/
video_warehouse


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
							<!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>30</title>
    <script src="static/js/vue.js"></script>

    <script src="static/js/data.js"></script>
    <link href="static/css/video-js.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/swiper-bundle.min.css" />
    <script src="static/js/videojs.min.js"></script>
    <script src='static/js/videojs.js'></script>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/swiper-bundle.min.js"></script>
    <style>
        html,
        body {
            position: relative;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .swiper-button-prev,
        .swiper-button-next {
            width: 70px;
            height: 100px;
            color: #fff;
            background: rgba(255, 255, 255, .5)
        }

        .swiper-button-prev:after,
        .swiper-button-next:after {
            font-size: 50px;
            font-weight: bold;
        }

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

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

        .video_item {
            position: relative;
            width: 15%;
            height: 18%;
            /* width: 254px;
            height: 318px; */
            margin: 7px 15px;

        }

        .video_item .poster {
            width: 100%;
            height: 100%;
            /* width: 254px;
            height: 318px; */
        }

        .video_item .play {
            width: 60px;
            height: 60px;
            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 class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) in videoList" :key="i">
                    <div class="video_list" v-show="!showPlayer">
                        <div class="video_item" v-for="(temp,idx) in item" :key="idx" @click="playVideo(idx,item)">
                            <img :src="temp.img" alt="" class="poster">
                            <img src="https://s1.ax1x.com/2023/05/26/p9b4EPe.png" alt="" class="play">
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <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;">
            </video>
        </div>

    </div>
    <script>
        //  import { dataList } from './static/js/data.js';
        var vm = new Vue({
            el: '#app',
            data: {
                player: null, //视频播放器
                videoUrl: '', //当前播放的视频资源
                showPlayer: false, //是否显示播放器
                videoList: dataList()
            },
            created() {
                // console.log(dataList)
            },
            methods: {
                // 播放视频
                playVideo(idx, all) {
                    let _this = this;
					let list = all
					let i =idx
                    _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'))
                                        // _this.exitFullscreen(videojs(`myVideos${type}`))

                                    }
                                })
                                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.fullScreen(videojs(`myVideos${type}`))


                                });
                                //监听播放结束
                                this.on('ended', function () {
                                    i++;
                                    //播放到最后一个
                                    if (i >= list.length) {
                                        //继续从头播放
                                        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>
       
        var swiper = new Swiper(".mySwiper", {
            // autoplay: true,
            loop: true, // 循环模式选项
            resistanceRatio: 0,//值越大空白越大
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
        //监听是否全屏
        $(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>