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

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

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

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

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

我个人的方法是：

html:

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

JS:

 
         $( 
         ".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()；

点击海报，播放效果如图：

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

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

还好有比较完整的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还支持音频播放，所以以后视频、音频都可以用它了。

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

猜你喜欢