七牛云video视频列表鼠标移入播放当前案例开发

Posted xiaobaicai123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了七牛云video视频列表鼠标移入播放当前案例开发相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>
    <style type="text/css">
        .video-boxs{
            width: 100%;
            overflow: hidden;
            float: left;
            height: 500px;
        }
        .video-boxs {
            width: 1300px;
            height: 600px;
        }

        .video-boxs .list {
            display: inline-block;
            margin-right: 10px;
        }

        .video-list,.list{
            width: 288px;
            height: 512px;
            float: left;
            position: relative;
            margin: 0 15px 15px 0;
            z-index: 99;
            overflow: hidden;
        }
        .video-bgs{
            background: center no-repeat;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        /*背景模糊*/
        .preview-bg{
            background: center no-repeat;
            background-size: cover;
            -webkit-filter: blur(15px);
            -moz-filter: blur(15px);
            -o-filter: blur(15px);
            -ms-filter: blur(15px);
            filter: blur(15px);
            z-index: 8;
        }
        /*展示图片*/
        .preview-img{
            background-size: contain;
            z-index: 9;
        }
    </style>
    <body>
                    <!--<div class="video-list">            
                <span class="video-bgs preview-bg" style="background-image:url(https://video.ffquan.com/video/5e630d30d9a5c.jpg)"></span>
                <span class="video-bgs preview-img" style="background-image: url(https://video.ffquan.com/video/5e630d30d9a5c.jpg);"></span>
                <div id="player" data-video="0" style="width:288px; height: 512px;"></div>
            </div>-->
        <div class="video-boxs">

        </div>
        
        <input type="button" name="click" id="click" value="鼠标进行事件处理" />
        <script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/qiniu-web-player-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            const DATA = [{
                "videoSrc": "http://demo-videos.qnsdk.com/movies/qiniu.mp4",
                "bg": "https://video.ffquan.com/video/5e630d30d9a5c.jpg",
                "img": "https://video.ffquan.com/video/5e630d30d9a5c.jpg"
            },
            {
                "videoSrc": "http://video-haodanku-com.cdn.fudaiapp.com/c2de482d83f8c523141eb57218e44e52.mp4?attname=15857922052278.mp4",
                "bg": "https://video.ffquan.com/video/5e630d30d9a5c.jpg",
                "img": "https://video.ffquan.com/video/5e630d30d9a5c.jpg"
            },
            {
                "videoSrc": "http://video-haodanku-com.cdn.fudaiapp.com/20a090abe4031e356e0c960057172b64.mp4?attname=15857922053056.mp4",
                "bg": "https://video.ffquan.com/video/5e630d30d9a5c.jpg",
                "img": "https://video.ffquan.com/video/5e630d30d9a5c.jpg"
            },
            {
                "videoSrc": "http://video-haodanku-com.cdn.fudaiapp.com/2ebacbc33db42b699e9c5f19dd2ef101.mp4?attname=15857922052251.mp4",
                "bg": "https://video.ffquan.com/video/5e630d30d9a5c.jpg",
                "img": "https://video.ffquan.com/video/5e630d30d9a5c.jpg"
            }
            ];
        
            window.onload = function () {
                
                var box = document.querySelector(‘.video-boxs‘);
            
                for (let i = DATA.length; i--;) {
                    item = document.createElement(‘div‘);
                    item.className = ‘list‘;
                    findSpan=document.createElement(‘span‘);
                    findSpan.className=‘video-bgs preview-bg‘;
                    findSpan.style="background-image:url("+DATA[i].bg+")";
                    sblsSpan=document.createElement(‘span‘);
                    sblsSpan.className=‘video-bgs preview-img‘;
                    sblsSpan.style="background-image: url("+DATA[i].img+")";
                    initPlayer(item, DATA[i]);
                    
                    box.insertBefore(item,box.childNodes[0]);
                    //box.appendChild(item);
                    item.appendChild(findSpan);
                    item.appendChild(sblsSpan);
                }

                function initPlayer(item, data) {
                    console.log(item)
                    const player = new QPlayer({
                        url: data.videoSrc,
                        container: item,
                        defaultViewConfig: {
                           noControls:true
                        },
                    });
                    item.addEventListener(‘mouseenter‘, function (e) {
//                        console.log(this.querySelectorAll(‘.video-bgs‘))
//                        console.log(this.getElementsByClassName("video-bgs"))
                        for (var i=0;i<this.getElementsByClassName("video-bgs").length;i++) {
                            this.getElementsByClassName("video-bgs")[i].style.display="none";
                        }
//                        $(this).find(‘.video-bgs‘).hide();

                        //播放位置
                        player.seek(0);
                        player.play();
                    });
                    item.addEventListener(‘mouseleave‘, function (e) {
//                        $(this).find(‘.video-bgs‘).show();
                        for (var i=0;i<this.getElementsByClassName("video-bgs").length;i++) {
                            this.getElementsByClassName("video-bgs")[i].style.display="block";
                        }
                        player.pause();
                    });
                }
            };


        </script>
    </body>
</html>

技术图片

以上是关于七牛云video视频列表鼠标移入播放当前案例开发的主要内容，如果未能解决你的问题，请参考以下文章

video实现有声音自动播放

PHP -- 七牛云 在线视频 获取某一帧作为封面图

播放器技术演进与探索，Web开播系统的技术演进，大屏终端音视频播放，音视频效果插件开放平台建设...

鼠标移入视频播放，鼠标移出播放停止，恢复到原来状态

Tp3如何实现本地视频文件上传到七牛云

专场报名七牛云音画质量优化专场