动态调用jPlayer播放器播放视频列表

最近做的一个项目中需要使用视频播放器播放视频,页面有视频海报的列表,点击海报,弹出播放层,播放相应视频,和一般性的视频网站一样,播放器是随调随用的。于是查了一下视频播放相关方面的插件,使用比较多的有video.js和jPlayer,于是先使用了video.js插件: 

动态调用jPlayer播放器播放视频列表_第1张图片

给海报赋值点击事件playListVideo,将该事件放到methods里:

动态调用jPlayer播放器播放视频列表_第2张图片
动态调用jPlayer播放器播放视频列表_第3张图片

动态调用jPlayer播放器播放视频列表_第4张图片

这里使用的方法是http://www.jq22.com/jquery-info404所提到的方法:

一个页面中有多个视频,需要点击后触发bootstrap 的模态窗,再弹出视频

我个人的方法是:

html:

1
< a  videohref = "http://xxx.mp4"  class = "video_link" >< img   src = "../images/xxx.jpg" /> a >

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$( ".video_link" ).click( function () {
     var  myPlayer = videojs( 'my-video' );
     var  videoUrl = $( this ).attr( "videohref" );
     videojs( "my-video" , {},  function () {
         window.myPlayer =  this ;
         $( "#mymoda .video-con #my-video source" ).attr( "src" , videoUrl);
         myPlayer.src(videoUrl);
         myPlayer.load(videoUrl);
         myPlayer.play();
     });
     $( ".click-modal" ).click();
});
// 模态窗消失时,关闭视频    
$( '#mymoda' ).on( 'hidden.bs.modal' function () {
     myPlayer.pause();

点击海报,播放效果如图:

动态调用jPlayer播放器播放视频列表_第5张图片

在chrome、opera等最新的浏览器上播放是没问题的,但是在ie上兼容性却不怎么好,即便是11也时常会出现无法加载的情况,所以决定用jPlayer插件,但是网上找了好多,都没有这种用法的例子,基本上都是播放单个视频的例子,或者是播放视频列表的例子,ps:是提前把视频链接装入jPlayer中,显示在页面上,像这样:

动态调用jPlayer播放器播放视频列表_第6张图片

但这种方式加载的视频数量有限,无法重复利用,不是我想要的。很奇怪,下载的官方例子当中竟然没有这种例子!

还好有比较完整的api文档,研究了一番,终于捣鼓了出来http://www.jplayer.cn/developer-guide.html

根据文档所说,每次调用前必须set一下数据:

这个方法用来定义播放的多媒体。参数media 是一个对象,它包含不同的编码格式属性和海报属性。

jPlayer("setMedia", media) 方法必须在jPlayer执行其他方法比如jPlayer("play")之前定义media。

播放结束后需要clear一下数据:

这个方法用来清除多媒体停止重放。如果这个时候一个多媒体文件正在下载,那么下载会被取消。

这个命令执行之后,像jPlayer("play")这样的重放命令会被忽略并引起错误事件直到使用jPlayer("setMedia",media)方法指定新的多媒体文件。

于是播放器的写法改成了这样:

var myVideo = new Vue({
    el: '#video-container',
    data: {
        bookName: '',
        showDialog: true
    },
    mounted: function () {
        this.$jPlayer = $("#jquery_jplayer_1");
        this.$jPlayer.jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    title: "",
                    m4v: '',
                    poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                });
            },
            swfPath: "../happyRead-js/jplayer",
            supplied: "webmv, ogv, m4v",
            size: {
                width: "640px",
                height: "360px",
                cssClass: "jp-video-360p"
            },
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true
        });
    },
    methods: {
        _initPlayer: function (bookName, videoUrl, bookId,poster) {
            this.$jPlayer.jPlayer('setMedia',{
                title: bookName,
                m4v: videoUrl,
                poster: poster
            });
            this.$jPlayer.jPlayer('load');
            this.$jPlayer.jPlayer('play');
            // 统计点击书本类型,将bookId传至后台
            //........
        },
        closePlayer: function () {
            this.$jPlayer.jPlayer('clearMedia');
            this.showDialog = false;
        }
    }
});
关闭播放器弹窗的时候调用clearMedia方法,每次调用的时候调用setMedia方法重置数据,ready后自动播放,不得不说jPlayer兼容性非常好,ie8一下都可以通过引入swf文件兼容,并且界面也非常好看。

动态调用jPlayer播放器播放视频列表_第7张图片

jPlayer还支持音频播放,所以以后视频、音频都可以用它了。

你可能感兴趣的:(前端)