h5项目中需要做视频课程播放,在网上搜了一下对应的插件,发觉xg-player西瓜播放器用起来不错.当然也踩了一些坑.
**西瓜播放器官方地址: ** http://h5player.bytedance.com/
西瓜播放器githuab官网: https://github.com/bytedance/xgplayer-vue
因为自己做的是个老项目,freemarker模板语法写的(总之是旧时代那种,你知道jsp就名字了),但是我想用自己的方式开发,所以在里面用了vue.
功能:
官网写的老的切换方式:
(1)先销毁视频,
(2)然后重新创建player实例
(3)启动播放器,播放视频
我写完了之后重新整理笔记,看到官网有更好的api切换视频,暂时还没有试过.
项目中的课程播放要比这个demo复杂的多,涉及到视频播放,图文播放,视频图文的切换播放
功能:
开始想的是获取课程列表,然后前台筛选判断应该播放哪一项,但是考虑到加载分页时会影响当前播放的视频,所以分页列表和正在播放视频分成了两个接口,并且前台需要处理的只是逻辑判断,不需要遍历操作整个列表,简化了查询匹配课程播放的问题.
在视频播放中需要监听视频的暂停,继续,结束状态.