v1.0核心
v1.0实例
v2.0

Playlist 视频列表

VideoJS+swiper PLUGIN

结合VideoJS和swiper两个插件制作轮播视频列表。VideoJS是一款很受欢迎的视频插件，功能强大，既支持单独视频播放也支持视频列表播放，具体用法见VideoJS。Swiper是非常受欢迎的轮播插件，具体用法见Swiper。将视频的缩略图放在Swiper里，点击Swiper切换视频。

左侧视频列表

正在播放
记录片《海洋》-海洋的色彩在雅克·贝汉的镜头下是清澈的蓝，影片里的生物也有自己的色彩，
1年前
正在播放
游戏《荒野大镖客》动画版欣赏
1年前
正在播放
特效片头赏析
1年前
正在播放
《守望先锋》预告片，该游戏是暴雪出品的首款团队射击游戏
1年前
正在播放
暴雪新作《守望先锋》预告片第二波
1年前
正在播放
可爱小白跟蝴蝶做游戏
1年前
正在播放
网易《炉石传说》预告片
1年前
正在播放
小怪兽
1年前
正在播放
《守望先锋》预告片第三波
1年前
正在播放
概念视频设计
1年前
正在播放
穿越雪山就是为了找到你
1年前
JS HTML 
  • <script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/videojs/css/video-js.css?v=1.1" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/video.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-flash.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/lang/zh-CN.js"></script>
<script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
        var videojs02 = videojs('videojs02');
        videojs("videojs02").ready(function() {
            var videojs02 = this;
            videojs02.play();
        });

        var swiper02 = new Swiper('#swiper02', {
            autoplay: false,
            direction: 'vertical',
            loop: true,
            slideToClickedSlide: true,
            slidesPerView: 2,
            centeredSlides: true,
            initialSlide: 1,
            spaceBetween : 8,
            breakpoints: {
                500: {
                    slidesPerView: 3,
                    spaceBetween : 14,
                },
            },
            navigation: {
                nextEl: '.ax-btn-next',
                prevEl: '.ax-btn-prev',
            },
            on: {
                click: function() {
                    $("[id^=videojs02]").attr('src', $('#swiper02 .swiper-slide-active figure').attr('data-video'));
                    $("[id^=videojs02]").attr('poster', $("#swiper02 .swiper-slide-active figure").css("background-image").replace('url("','').replace('")',''));
                }
            }
        })
        $("[id^=videojs02]").attr('src', $('#swiper02 .swiper-slide-active figure').attr('data-video'))
        $("[id^=videojs02]")[0].onended = function() {
            console.log('视频播放结束');
            setTimeout(function() {
                swiper02.slideNext();
                $("[id^=videojs02]").attr('src', $('#swiper02 .swiper-slide-active figure').attr('data-video'));
                $("[id^=videojs02]").attr('poster', $("#swiper02 .swiper-slide-active figure").css("background-image").replace('url("','').replace('")',''));
                console.log($('#swiper02 .swiper-slide-active figure').attr('data-video'))
            }, 3000)
        }
    });
</script>
                        
  •                                     <div class="ax-videojs ax-playlist-bottom">

                                    <video id="videojs02" class="video-js" autoplay="autoplay" controls width="100%" height="100%" poster="/examples/images/video01.jpg">
                                        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                                    </video>

                                    <div class="swiper-container" id="swiper02">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <figure  data-video='http://vjs.zencdn.net/v/oceans.mp4' style="background-image: url(/examples/images/video01.jpg)"><i>正在播放</i><figcaption>记录片《海洋》-海洋的色彩在雅克·贝汉的镜头下是清澈的蓝，影片里的生物也有自己的色彩，</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure  data-video='https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S02_E03_McCree_REUNION_zhCN_1080P_mb78.mp4' style="background-image: url(/examples/images/video02.jpg)"><i>正在播放</i><figcaption>游戏《荒野大镖客》动画版欣赏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure  data-video='http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4' style="background-image: url(/examples/images/video03.jpg)"><i>正在播放</i><figcaption>特效片头赏析</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4' style="background-image: url(/examples/images/video04.jpg)"><i>正在播放</i><figcaption>《守望先锋》预告片，该游戏是暴雪出品的首款团队射击游戏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4' style="background-image: url(/examples/images/video05.jpg)"><i>正在播放</i><figcaption>暴雪新作《守望先锋》预告片第二波</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://www.runoob.com/try/demo_source/mov_bbb.mp4' style="background-image: url(/examples/images/video06.jpg)"><i>正在播放</i><figcaption>可爱小白跟蝴蝶做游戏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/HearthStone/f6cd63b590d416821d3e27e0.mp4' style="background-image: url(/examples/images/video07.jpg)"><i>正在播放</i><figcaption>网易《炉石传说》预告片</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.htmleaf.com/1810/201810171450/ckin.mp4' style="background-image: url(/examples/images/video08.jpg)"><i>正在播放</i><figcaption>小怪兽</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4' style="background-image: url(/examples/images/video09.jpg)"><i>正在播放</i><figcaption>《守望先锋》预告片第三波</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201306/jiaoben1070/movie.mp4' style="background-image: url(/examples/images/video10.jpg)"><i>正在播放</i><figcaption>概念视频设计</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201804/jiaoben5886/vedio/sintel.mp4' style="background-image: url(/examples/images/video11.jpg)"><i>正在播放</i><figcaption>穿越雪山就是为了找到你</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-btn-prev ax-icon  ax-light  ax-iconfont ax-icon-left"></a>
                                        <a href="###" class="ax-btn-next ax-icon  ax-light  ax-iconfont ax-icon-right"></a>
                                    </div>
                                    <div class="ax-clear"></div>
                                </div>

右侧视频列表

正在播放
记录片《海洋》-海洋的色彩在雅克·贝汉的镜头下是清澈的蓝，影片里的生物也有自己的色彩，
1年前
正在播放
游戏《荒野大镖客》动画版欣赏
1年前
正在播放
特效片头赏析
1年前
正在播放
《守望先锋》预告片，该游戏是暴雪出品的首款团队射击游戏
1年前
正在播放
暴雪新作《守望先锋》预告片第二波
1年前
正在播放
可爱小白跟蝴蝶做游戏
1年前
正在播放
网易《炉石传说》预告片
1年前
正在播放
小怪兽
1年前
正在播放
《守望先锋》预告片第三波
1年前
正在播放
概念视频设计
1年前
正在播放
穿越雪山就是为了找到你
1年前
JS HTML 
  • <script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/videojs/css/video-js.css?v=1.1" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/video.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-flash.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/lang/zh-CN.js"></script>
<script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
        var videojs03 = videojs('videojs03');
        videojs("videojs03").ready(function() {
            var videojs03 = this;
            videojs03.play();
        });

        var swiper03 = new Swiper('#swiper03', {
            autoplay: false,
            direction: 'vertical',
            loop: true,
            slideToClickedSlide: true,
            slidesPerView: 2,
            centeredSlides: true,
            initialSlide: 1,
            spaceBetween : 8,
            breakpoints: {
                500: {
                    slidesPerView: 3,
                    spaceBetween : 14,
                },
            },
            on: {
                click: function() {
                    $("[id^=videojs03]").attr('src', $('#swiper03 .swiper-slide-active figure').attr('data-video'));
                    $("[id^=videojs03]").attr('poster', $("#swiper03 .swiper-slide-active figure").css("background-image").replace('url("','').replace('")',''));
                }
            }
        })
        $("[id^=videojs03]").attr('src', $('#swiper03 .swiper-slide-active figure').attr('data-video'))
        $("[id^=videojs03]")[0].onended = function() {
            console.log('视频播放结束');
            setTimeout(function() {
                swiper03.slideNext();
                $("[id^=videojs03]").attr('src', $('#swiper03 .swiper-slide-active figure').attr('data-video'));
                $("[id^=videojs03]").attr('poster', $("#swiper03 .swiper-slide-active figure").css("background-image").replace('url("','').replace('")',''));
                console.log($('#swiper03 .swiper-slide-active figure').attr('data-video'))
            }, 3000)
        }
    });
</script>
                        
  •                                     <div class="ax-videojs ax-playlist-bottom">

                                    <video id="videojs03" class="video-js" autoplay="autoplay" controls width="100%" height="100%" poster="/examples/images/video01.jpg">
                                        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                                    </video>

                                    <div class="swiper-container" id="swiper03">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <figure  data-video='http://vjs.zencdn.net/v/oceans.mp4' style="background-image: url(/examples/images/video01.jpg)"><i>正在播放</i><figcaption>记录片《海洋》-海洋的色彩在雅克·贝汉的镜头下是清澈的蓝，影片里的生物也有自己的色彩，</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure  data-video='https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4' style="background-image: url(/examples/images/video02.jpg)"><i>正在播放</i><figcaption>游戏《荒野大镖客》动画版欣赏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure  data-video='http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4' style="background-image: url(/examples/images/video03.jpg)"><i>正在播放</i><figcaption>特效片头赏析</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4' style="background-image: url(/examples/images/video04.jpg)"><i>正在播放</i><figcaption>《守望先锋》预告片，该游戏是暴雪出品的首款团队射击游戏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4' style="background-image: url(/examples/images/video05.jpg)"><i>正在播放</i><figcaption>暴雪新作《守望先锋》预告片第二波</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://www.runoob.com/try/demo_source/mov_bbb.mp4' style="background-image: url(/examples/images/video06.jpg)"><i>正在播放</i><figcaption>可爱小白跟蝴蝶做游戏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/HearthStone/f6cd63b590d416821d3e27e0.mp4' style="background-image: url(/examples/images/video07.jpg)"><i>正在播放</i><figcaption>网易《炉石传说》预告片</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.htmleaf.com/1810/201810171450/ckin.mp4' style="background-image: url(/examples/images/video08.jpg)"><i>正在播放</i><figcaption>小怪兽</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4' style="background-image: url(/examples/images/video09.jpg)"><i>正在播放</i><figcaption>《守望先锋》预告片第三波</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201306/jiaoben1070/movie.mp4' style="background-image: url(/examples/images/video10.jpg)"><i>正在播放</i><figcaption>概念视频设计</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201804/jiaoben5886/vedio/sintel.mp4' style="background-image: url(/examples/images/video11.jpg)"><i>正在播放</i><figcaption>穿越雪山就是为了找到你</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-btn-prev ax-icon  ax-light  ax-iconfont ax-icon-left"></a>
                                        <a href="###" class="ax-btn-next ax-icon  ax-light  ax-iconfont ax-icon-right"></a>
                                    </div>
                                    <div class="ax-clear"></div>
                                </div>

底部视频列表

正在播放
记录片《海洋》-海洋的色彩在雅克·贝汉的镜头下是清澈的蓝，影片里的生物也有自己的色彩，
1年前
正在播放
游戏《荒野大镖客》动画版欣赏
1年前
正在播放
特效片头赏析
1年前
正在播放
《守望先锋》预告片，该游戏是暴雪出品的首款团队射击游戏
1年前
正在播放
暴雪新作《守望先锋》预告片第二波
1年前
正在播放
可爱小白跟蝴蝶做游戏
1年前
正在播放
网易《炉石传说》预告片
1年前
正在播放
小怪兽
1年前
正在播放
《守望先锋》预告片第三波
1年前
正在播放
概念视频设计
1年前
正在播放
穿越雪山就是为了找到你
1年前
JS HTML 
  • <script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/videojs/css/video-js.css?v=1.1" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/video.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-flash.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/lang/zh-CN.js"></script>
<script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
    $(document).ready(function () {
        var videojs04 = videojs('videojs04');
        videojs("videojs04").ready(function() {
            var videojs04 = this;
            videojs04.play();
        });

        var swiper04 = new Swiper('#swiper04', {
            autoplay: false,
            loop: true,
            slideToClickedSlide: true,
            slidesPerView: 3,
            spaceBetween : 8,
            breakpoints: {
                500: {
                    slidesPerView: 4,
                    spaceBetween : 14,
                },
            },
            centeredSlides: true,
            initialSlide: 1,
            navigation: {
                nextEl: '.ax-btn-next',
                prevEl: '.ax-btn-prev',
            },
            on: {
                click: function() {
                    $("[id^=videojs04]").attr('src', $('#swiper04 .swiper-slide-active figure').attr('data-video'));
                    $("[id^=videojs04]").attr('poster', $("#swiper04 .swiper-slide-active figure").css("background-image").replace('url("','').replace('")',''));
                }
            }
        })
        $("[id^=videojs04]").attr('src', $('#swiper04 .swiper-slide-active figure').attr('data-video'))
        $("[id^=videojs04]")[0].onended = function() {
            console.log('视频播放结束');
            setTimeout(function() {
                swiper04.slideNext();
                $("[id^=videojs04]").attr('src', $('#swiper04 .swiper-slide-active figure').attr('data-video'));
                $("[id^=videojs04]").attr('poster', $("#swiper04 .swiper-slide-active figure").css("background-image").replace('url("','').replace('")',''));
                console.log($('#swiper04 .swiper-slide-active figure').attr('data-video'))
            }, 3000)
        }
    });
</script>
                        
  •                                     <div class="ax-videojs ax-playlist-bottom">

                                    <video id="videojs04" class="video-js" autoplay="autoplay" controls width="100%" height="100%" poster="/examples/images/video01.jpg">
                                        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
                                    </video>

                                    <div class="swiper-container" id="swiper04">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <figure  data-video='http://vjs.zencdn.net/v/oceans.mp4' style="background-image: url(/examples/images/video01.jpg)"><i>正在播放</i><figcaption>记录片《海洋》-海洋的色彩在雅克·贝汉的镜头下是清澈的蓝，影片里的生物也有自己的色彩，</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure  data-video='https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4' style="background-image: url(/examples/images/video02.jpg)"><i>正在播放</i><figcaption>游戏《荒野大镖客》动画版欣赏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure  data-video='http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4' style="background-image: url(/examples/images/video03.jpg)"><i>正在播放</i><figcaption>特效片头赏析</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4' style="background-image: url(/examples/images/video04.jpg)"><i>正在播放</i><figcaption>《守望先锋》预告片，该游戏是暴雪出品的首款团队射击游戏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4' style="background-image: url(/examples/images/video05.jpg)"><i>正在播放</i><figcaption>暴雪新作《守望先锋》预告片第二波</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://www.runoob.com/try/demo_source/mov_bbb.mp4' style="background-image: url(/examples/images/video06.jpg)"><i>正在播放</i><figcaption>可爱小白跟蝴蝶做游戏</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/HearthStone/f6cd63b590d416821d3e27e0.mp4' style="background-image: url(/examples/images/video07.jpg)"><i>正在播放</i><figcaption>网易《炉石传说》预告片</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.htmleaf.com/1810/201810171450/ckin.mp4' style="background-image: url(/examples/images/video08.jpg)"><i>正在播放</i><figcaption>小怪兽</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4' style="background-image: url(/examples/images/video09.jpg)"><i>正在播放</i><figcaption>《守望先锋》预告片第三波</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201306/jiaoben1070/movie.mp4' style="background-image: url(/examples/images/video10.jpg)"><i>正在播放</i><figcaption>概念视频设计</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                            <div class="swiper-slide">
                                                <figure data-video='http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201804/jiaoben5886/vedio/sintel.mp4' style="background-image: url(/examples/images/video11.jpg)"><i>正在播放</i><figcaption>穿越雪山就是为了找到你</figcaption><em>1年前</em><span class="ax-mask"></span></figure>
                                            </div>
                                        </div>
                                        <a href="###" class="ax-btn-prev ax-icon  ax-light  ax-iconfont ax-icon-left"></a>
                                        <a href="###" class="ax-btn-next ax-icon  ax-light  ax-iconfont ax-icon-right"></a>
                                    </div>
                                    <div class="ax-clear"></div>
                                </div>

VideoJS+Playlist

Playlist是videojs官方开发的视频列表插件，详见官网插件库，本插件在原版v3.5.2基础上进行了改版，更符合实际需要。

JS HTML 
  • <script src="src/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/videojs/css/video-js.css?v=1.1" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://src.axui.cn/v1.0/src/plugins/videojs/css/videojs-playlist-ui.css" />
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/video.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-playlist.js"></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-flash.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/js/videojs-playlist-ui.js" ></script>
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/videojs/lang/zh-CN.js"></script>
<script type='text/javascript'>
    videojs.options.flash.swf = "https://src.axui.cn/v1.0/src/plugins/videojs/js/video-js.swf";
    var videojs05 = videojs('videojs05',{
            autoplay:false,
            height:'',
            width:''
        });

        videojs05.playlist([
            {
                name: "记录片《海洋》-海洋的色彩在雅克·贝汉的镜头下是清澈的蓝，影片里的生物也有自己的色彩",
                pubtime: "1年前",
                sources: [{ src: "http://vjs.zencdn.net/v/oceans.mp4", type: "video/mp4" }],
                poster:'/examples/images/video01.jpg',
                thumbnail: "/examples/images/video01.jpg"
            },
            {
                name: "游戏《荒野大镖客》动画版欣赏",
                pubtime: "1年前",
                sources: [{ src: "https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4", type: "video/mp4" }],
                poster:'/examples/images/video02.jpg',
                thumbnail: "/examples/images/video02.jpg"
            },
            {
                name: "特效片头赏析",
                pubtime: "1年前",
                sources: [{ src: "http://www.jq22.com/demo/johndyer-mediaelement-53ab0f8-150605001031/media/echo-hereweare.mp4", type: "video/mp4" }],
                poster:'/examples/images/video03.jpg',
                thumbnail: "/examples/images/video03.jpg"
            },
            {
                name: "守望先锋》预告片，该游戏是暴雪出品的首款团队射击游戏",
                pubtime: "1年前",
                sources: [{ src: "https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4", type: "video/mp4" }],
                poster:'/examples/images/video04.jpg',
                thumbnail: "/examples/images/video04.jpg"
            },{
                name: "暴雪新作《守望先锋》预告片第二波",
                pubtime: "1年前",
                sources: [{ src: "https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4", type: "video/mp4" }],
                poster:'/examples/images/video05.jpg',
                thumbnail: "/examples/images/video05.jpg"
            },
            {
                name: "可爱小白跟蝴蝶做游戏",
                pubtime: "1年前",
                sources: [{ src: "https://www.runoob.com/try/demo_source/mov_bbb.mp4", type: "video/mp4" }],
                poster:'/examples/images/video06.jpg',
                thumbnail: "/examples/images/video06.jpg"
            },
            {
                name: "网易《炉石传说》预告片",
                pubtime: "1年前",
                sources: [{ src: "https://blz-videos.nosdn.127.net/1/HearthStone/f6cd63b590d416821d3e27e0.mp4", type: "video/mp4" }],
                poster:'/examples/images/video07.jpg',
                thumbnail: "/examples/images/video07.jpg"
            },
            {
                name: "小怪兽",
                pubtime: "1年前",
                sources: [{ src: "http://demo.htmleaf.com/1810/201810171450/ckin.mp4", type: "video/mp4" }],
                poster:'/examples/images/video08.jpg',
                thumbnail: "/examples/images/video08.jpg"
            },
            {
                name: "《守望先锋》预告片第三波",
                pubtime: "1年前",
                sources: [{ src: "https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Soldier76_Hero.mp4", type: "video/mp4" }],
                poster:'/examples/images/video09.jpg',
                thumbnail: "/examples/images/video09.jpg"
            },
            {
                name: "概念视频设计",
                pubtime: "1年前",
                sources: [{ src: "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201306/jiaoben1070/movie.mp4", type: "video/mp4" }],
                poster:'/examples/images/video10.jpg',
                thumbnail: "/examples/images/video10.jpg"
            },
            {
                name: "穿越雪山就是为了找到你",
                pubtime: "1年前",
                sources: [{ src: "http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201804/jiaoben5886/vedio/sintel.mp4", type: "video/mp4" }],
                poster:'/examples/images/video11.jpg',
                thumbnail: "/examples/images/video11.jpg"
            }

        ]);

        videojs05.playlist.autoadvance(0);
        videojs05.playlist.repeat(true);
        videojs05.playlistUi();
</script>
                        
  •                                 <div class="ax-videojs ax-playlist-pages">
                                    <video id="videojs05" class="video-js" controls ></video>
                                    <div class="vjs-playlist"></div>
                                </div>