前端实现视频轮播（开场动画+五个视频轮播）

桑榆呀

于 2024-07-26 15:58:30 发布

阅读量339

点赞数 2

文章标签：音视频 java javascript jquery

本文链接：https://blog.csdn.net/weixin_43337299/article/details/127243676

版权

项目场景：

打开网页播放开场动画，之后五个视频轮播。0|1|2|3|4|5|1|2|3|4|5|1|....

老项目用的jquery。

初步实现：

参考了：HTML5 video的多视频循环播放，轮播视频

HTML：

<video class="video_play" muted src="./video.mp4" poster="" autoplay="autoplay" volume="true" class="width-full" id="video-details"></video>
<%--src是开场动画地址, autoplay自动播放--%>

js：

$(window).load(function(){
    swichvideo()
}

function swichvideo() {
        var vList = ['./video1.mp4', './video2.mp4', './video3.mp4', './video4.mp4', './video5.mp4']; //五个轮播视频array
        var vLen = vList.length;
        var curr = 0;
        var myvideo = document.getElementById("video-details");
        myvideo.onended = function() {
            myvideo.src = vList[curr];    
 	        var $text =  vList[curr];  
            myvideo.load();    
            myvideo.play();   
            curr++;   
            if(curr >= vLen){   
                curr = 0; //重新循环播放
        }
}

基本上参考大佬的就实现啦！！

过渡问题：

切换闪烁加了淡出还是会有闪烁的感觉，那就加背景图（下一个视频的第一帧）然后淡出。

当前视频放完，下一个视频还未加载，会回到当前视频的第一帧，那就透明时间更久一点？

HTML：

<div class="video">
    <div class="container">
        <div class="video-details row" style="width:100%;height:100%">    
            <video class="video_play" muted src="./video.mp4" poster="" autoplay="autoplay" volume="true" class="width-full" id="video-details"></video>             
            <img id="img-detail" src="./img1.png" style="width:100%;height:100%"/>
            <!--src是第一张图片地址-->
        </div>
    </div>
</div>

js：

    $(window).load(function(){
        swichvideo()
    }

    function swichvideo() {
        //视频顺序播放，图片背景，圆点跟随
        var vList = ['Transit/skin/video/video1.mp4', 'Transit/skin/video/video2.mp4', 'Transit/skin/video/video3.mp4', 'Transit/skin/video/video4.mp4', 'Transit/skin/video/video5.mp4']; // 播放列表
        var iList = ['Transit/skin/image/login/img2.png', 'Transit/skin/image/login/img3.png', 'Transit/skin/image/login/img4.png', 'Transit/skin/image/login/img5.png', 'Transit/skin/image/login/img1.png',]; // 播放列表
        var vLen = vList.length;
        var curr = 0;
        if (typeof (c) != "undefined") {
            curr = c
        }
        var curr2 = curr;
        var myvideo = document.getElementById("video-details");
        var myimg = document.getElementById("img-detail");
        myvideo.onended = function () {
            //console.log(curr, 111111)
            sessionStorage.setItem("key", "1");
            //myimg.src = iList[curr]
            myvideo.src = vList[curr];
            var $text = vList[curr];
            myvideo.load();
            myvideo.play();
            curr2 = curr
//图片等下一个视频加载了再变哈，不然也会闪现下下个视频的！！！时间多久我也不知道，我的视频都是7-10s的，我就写了2000ms
            setTimeout(() => {
                myimg.src = iList[curr2]
            }, "2000");
            curr++;
            if (curr >= vLen) {
                curr = 0; //重新循环播放
            }
        };
    }

css:

.videoswich {
    animation: myfirst 3s alternate;
    /*-webkit-filter: grayscale(100%);*/
    /*添加灰度蒙版，如果设定为100%则视频显示为黑白*/
}
@keyframes myfirst {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0.5
    }
    100% {
        opacity: 0
    }
}

基本上参考大佬的就实现啦！！

代码：

附上代码。

<div class="video">
    <div class="container">
        <div class="video-details row" style="width:100%;height:100%">
            <video class="video_play" muted src="Transit/skin/video/video.mp4" poster="" autoplay="autoplay" volume="true" class="width-full" id="video-details"></video>             
            <img id="img-detail" src="Transit/skin/image/login/img1.png" style="width:100%;height:100%"/>
        </div>
    </div>
</div>                
<div class="right-spot">
    <ul class="spot-list" type="circle">
        <li id="firstspot"></li>
             <li></li>
             <li></li>
             <li></li>
             <li id="lastspot"></li>
     </ul>
</div>


<script type="text/javascript">
    //$('.rotationWrap-1 ul').slick({
    //    infinite: true,
    //    slidesToShow: 1,
    //    slidesToScroll: 1,
    //    autoplay: true,
    //    centerMode: false,
    //    arrows: true,
    //    dots: true,
    //    autoplaySpeed: 4000,
    //});
    var isSamePage = false
    var navli = $(".nav-list li");
    navli.click(function () {
        var pageIndex = $(this).index();
        if (pageIndex == window.localStorage.getItem('pageIndex')) {
            isSamePage = true
        } else {
            isSamePage = false
        }
        window.localStorage.setItem('isSamePage', isSamePage)
        window.localStorage.setItem('pageIndex', pageIndex)
    });

    window.onload = function () {
        console.log(window.localStorage.getItem('isSamePage'))
        const referrer = document.referrer
        //window.localStorage.setItem('isfirst', true);
        //console.log(window.localStorage.getItem('isfirst'), 'adsafsa', referrer)
        //swichvideo()
        let refer = window.localStorage.getItem('r')
        let flag = 0
        console.log(refer, referrer, 3333)
        if (referrer.length == 0 || (referrer == refer && window.localStorage.getItem('isSamePage') == 'false')) {
            // Hide the div
            $("#login-cont").hide();
            // Show the div in 5s
            $("#login-cont").delay(7500).fadeIn(500);
            swichvideo()
            flag = 1
        } else {
            console.log(referrer, 111)
            swichvideo(1)
            document.getElementById("firstspot").click();
            document.getElementById("img-detail").src = 'Transit/skin/image/login/img2.png'
            window.localStorage.setItem('r', referrer)
            window.localStorage.setItem('isSamePage', 'false')
        }


    }
    //window.addEventListener("beforeunload", function (event) {
    //    window.localStorage.setItem('isfirst', window.localStorage.getItem('isfirst'));
    //});


    //$(document).ready(function () {
    //    swichvideo()
    //});
    //$(window).on('load', function () {
    //    swichvideo()
    //})
    //视频切换淡出
    var myvideo = document.getElementById("video-details");
    myvideo.addEventListener("timeupdate", function (e) {
        if (myvideo.currentTime > 0) {
            $('#video-details').removeClass('videoswich')
        }
        //if (myvideo.currentTime == myvideo.duration - myvideo.currentTime) {
        //    console.log('最后1s')
        //    $('#video-details').css('visibility', 'visible');
        //}
        if (myvideo.currentTime >= myvideo.duration - 2) {
            //console.log('最后两秒？')
            $('#video-details').addClass('videoswich')
        }
        if (myvideo.currentTime >= myvideo.duration - 0.5) {
            //console.log('最后0.1', length)
            clearActiveSpot();
        }
    });
    //清除选中样式
    function clearActiveSpot() {
        let li = $(".spot-list li");
        let length = $(".spot-list li").length;
        for (let i = 0; i < length; i++) {
            $(".spot-list li").eq(i).removeClass('spot-active')
        }
    }


    function swichvideo(c) {
        //视频顺序播放，图片背景，圆点跟随
        var vList = ['Transit/skin/video/video1.mp4', 'Transit/skin/video/video2.mp4', 'Transit/skin/video/video3.mp4', 'Transit/skin/video/video4.mp4', 'Transit/skin/video/video5.mp4']; // 播放列表
        var iList = ['Transit/skin/image/login/img2.png', 'Transit/skin/image/login/img3.png', 'Transit/skin/image/login/img4.png', 'Transit/skin/image/login/img5.png', 'Transit/skin/image/login/img1.png',]; // 播放列表
        var vLen = vList.length;
        var curr = 0;
        console.log(c,11112211)
        if (typeof (c) != "undefined") {
            curr = c
        }
        var curr2 = curr;
        var myvideo = document.getElementById("video-details");
        var myimg = document.getElementById("img-detail");
        let spotli = $(".spot-list li");
        myvideo.onended = function () {
            //console.log(curr, 111111)
            sessionStorage.setItem("key", "1");
            //myimg.src = iList[curr]
            myvideo.src = vList[curr];
            var $text = vList[curr];
            myvideo.load();
            myvideo.play();
            curr2 = curr
            setTimeout(() => {
                myimg.src = iList[curr2]
            }, "2000");
            curr++;
            if (curr >= vLen) {
                curr = 0; //重新循环播放
            }
            $(".spot-list li").eq(curr - 1).addClass('spot-active')
            $(".spot-list li").eq(curr - 2).removeClass('spot-active')
            if (curr == '2' || curr == '3' || curr == '0') {
                $('.containerWrap').addClass('lightning')
            } else {
                $('.containerWrap').removeClass('lightning')
            }
            $(".video-details h4").text($text);
        };

        //小圆点 点击切换视频
        spotli.click(function () {
            clearActiveSpot();
            $(".spot-list li").eq($(this).index()).addClass('spot-active')
            myvideo.pause();
            myvideo.src = vList[$(this).index()]
            myvideo.load();
            myvideo.play();
        });
    }
</script>