wangqianqian
/
video_warehouse


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
							<!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>50</title>
    <script src="static/js/vue.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/data.js"></script>
    <script src="static/js/swiper-bundle.min.js"></script>
    <style lang="scss">
        html,
        body {
            /* position: relative; */
            height: 100%;
            padding: 0;
            margin: 0;
        }


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

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

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            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 .poster {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

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

        .video_swiper .swiper-button-prev:after,
        .video_swiper .swiper-button-next:after {
            font-size: 50px;
            font-weight: bold;
        }
        .video_list {
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }


        .video_list .video_item {
            position: relative;
            width: 9%;
            height: 19%;
            margin: 2px 7px;
        }

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

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

        .player_box {
            position: relative;
        }

        .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;
        }

        .video-js.vjs-fluid {
            height: 100vh !important;
            overflow: hidden !important;
        }

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

        .vjs-my-components:hover {
            cursor: pointer;
        }

        .img_swiper {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 88;
        }

        .img_swiper img {
            width: 100%;
            height: 100%;
        }

        .img_swiper .exit {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 200px;
            height: 92px;
            background-color: rgba(115, 133, 159, .5);
            z-index: 9999;
            color: #fff;
            font-size: 40px;
            text-align: center;
            line-height: 100px;
        }
        .img_swiper .swiper-button-prev:after,
        .img_swiper .swiper-button-next:after {
            font-size: 50px;
            font-weight: bold;
        }
        .img_swiper .swiper-button-prev,
        .img_swiper .swiper-button-next {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            color: #fff;
            background: rgb(127, 127, 127,.3);
        }
    </style>
</head>

<body>
    <div id="app" class="box">
        <div class="video_swiper">
            <div class="swiper mySwiper1"  v-show="!showImg">
                <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="temp.v_img?playVideo(idx,item):previewImg(idx,item)">
                                <img :src="temp.v_img" alt="" class="poster" v-if="temp.v_img">
                                <img src="https://s1.ax1x.com/2023/05/26/p9b4EPe.png" alt="" class="play"
                                    v-if="temp.v_img">
                                <img :src="temp.p_img" alt="" class="poster" v-if="temp.p_img">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div v-show="showPlayer&&!showImg" 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>
        <div class="img_swiper">
            <div class="swiper mySwiper2" v-show="showImg">
                <div class="swiper-wrapper">
                    <div class="swiper-slide img_slide" v-for="(item,index) in imgList" :key="index">
                        <img :src="item" alt="" class="bg_img">
                        <div class="exit" @click="handleExit">返回</div>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                player: null, //视频播放器
                showPlayer: false, //是否显示播放器
                showImg: false, //是否显示大图
                videoList: dataList(),
                imgList: [], //要展示的图片列表
            },
            created() {
                // for (let i = 1; i < 151; i++) {
                //     if (i < 51) {
                //         let num1 = i < 10 ? '0' + i : i
                //         this.videoList[0].push({ id: i, v_url: `static/video/video_01/${num1}.mp4`, v_img: `static/video/img_01/${num1}.jpg`,p_url:'',p_img:'' })
                //     }
                //     if (51 <= i && i < 101) {
                //         let a = Number(i - 50)
                //         let num2 = a < 10 ? '0' + a : a
                //         this.videoList[1].push({ id: i, v_url: '', v_img: '', p_url: `static/img/img_01/${num2}.jpg`, p_img: `static/img/img_list_01/${num2}.jpg` })
                //     }
                //     if (101 <= i && i < 151) {
                //         let num3 = Number(i - 100) < 10 ? '0' + Number(i - 100) : Number(i - 100)
                //         this.videoList[2].push({ id: i, v_url: `static/video/video_02/${num3}.mp4`, v_img: `static/video/img_02/${num3}.jpg`,p_url:'',p_img:'' })
                //     }
                // }
                // console.log(this.videoList, 1111)
                // this.videoList[1].map(i => {
                //     this.imgList.push(i.p_url)
                // })
                // console.log(this.imgList, 1111)
            },
            methods: {
                //退出放大图片
                handleExit() {
                    this.showImg = false
                },
                //点击打开图片
                previewImg(idx, all) {
                    let list = []
                    all.map(i => {
                        list.push(i.p_url)
                    })
                    this.imgList = list
                    this.showImg = true
                    var swiper2 = new Swiper(".mySwiper2", {
                        autoplay: true,
                        loop: true, // 循环模式选项
                        resistanceRatio: 0,//值越大空白越大
                        initialSlide: idx,//默认显示第几页
                        navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                        },
                    });
                },
                // 播放视频
                playVideo(idx,all) {
                    let _this = this;
                    let i = idx
                    let list = all
                    _this.showPlayer = true
                    $(function () {
                        _this.$nextTick(() => {
                            _this.player = videojs(`myVideos`, {
                                autoplay: false, //自动播放
                                controls: true,//控制条
                                language: "en",// 初始化语言
                                preload: "auto",// 预加载
                                sources: [{ src: list[i].v_url, type: 'video/mp4' }], //视频资源
                                poster: list[i].v_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;

                                    }
                                    var videoObj = list[i];
                                    this.src({ src: videoObj.v_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 language="javascript">
        var swiper1 = new Swiper(".mySwiper1", {
            // 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>
        //禁止使用右键
        function click() {
            if (event.button == 2) {

            }
        }
        document.onmousedown = click
    </script>

</body>

</html>