资源管理系统-VUE使用ckplayer实现视频列表播放

一、下载ckplayer插件

官网地址：http://www.ckplayer.com/down/

二、加压后将ckplayer放进VUE项目的static目录下：

三、在index.html中引入ckplayer.js文件

<script src="./static/ckplayer/ckplayer.js"></script>

四、创建VUE组件

<template><div id="video"></div>
</template><script>export default {name: 'ckplayer',props: ['videoUrls','autoPlay','poster','loop'],data () {return {player: ''}},watch: {videoUrls: {handler(newVideoUrls, VideoUrls) {this.initVideo(newVideoUrls,this.autoPlay);},immediate: true}},mounted: function(){this.initVideo(this.videoUrls,this.autoPlay);},methods:{initVideo(videoUrls,autoPlay) {// 挂载完成后进行var videoObject = {container: '#video', //容器的ID或classNamevariable: 'player', //播放函数名称autoplay: this.autoPlay,//自动播放loaded: 'loadedHandler', //当播放器加载后执行的函数loop: this.loop, //播放结束是否循环播放cktrack: '', //字幕文件poster: this.poster, //封面图片preview: { //预览图片file: ['', ''],scale: 2},config: '', //指定配置函数debug: true, //是否开启调试模式drag: 'start', //拖动的属性seek: 0, //默认跳转的时间// promptSpot: [ //提示点//   {//     words: '提示点文字01',//     time: 30//   },//   {//     words: '提示点文字02',//     time: 150//   }// ],video: this.videoUrls};// 定义一个对象var player = new ckplayer(videoObject);this.player = player;}}}
</script>

五、引用VUE组件

六、调用VUE组件

<div v-if="resource.type === 0"><div style="font-weight:bold;font-size: medium;margin-top: 30px;">视频内容：</div><ckplayer :poster="poster" :videoUrls="videoUrls" :autoPlay="autoPlay" :loop="loop"></ckplayer></div>

七、数据加载

<script>import ckplayer from './components/ckplayer'let that;export default {name: "resourceDetails",components: { ckplayer },data() {return {id: this.$route.query.id,resource: {},videoUrls: [],autoPlay: false,loop: false,poster: null,//视频封面图片}},beforeCreate: function () {that = this;},created() {this.getResource();},methods: {init(){getDictInfoByName('主题分类').then(response => {if (response.code == 200) {this.themes = response.data;}});getDictInfoByName('水印').then(response => {if (response.code == 200) {this.marks = response.data;}});getDictInfoByName('国籍').then(response => {if (response.code == 200) {this.countrys = response.data;}});getDictInfoByName('视频文件格式').then(response => {if (response.code == 200) {this.videotypes = response.data;}});},getResource() {this.listLoading = true;let params = {id: this.id};getResources(params).then(response => {this.listLoading = false;if (response.code == 200) {let data = response.data;console.log(data.list[0])this.resource = data.list[0];this.poster = this.staticServer + data.list[0].resourcedir + '/image/' + data.list[0].posterFull;if(data.list[0].samplevideo != null){this.videoUrls.push([this.staticServer + this.resource.resourcedir + '/' + data.list[0].samplevideo,'video/mp4','预览视频',0]);};if(data.list[0].videoname != null){data.list[0].videoname.split(',').forEach((name, index) => {this.videoUrls.push([this.staticServer + this.resource.resourcedir + '/' + name,'video/' + name.split('.')[1],'视频' + index,index])});};let paramsImage = {dir: this.resource.resourcedir};getImages(paramsImage).then(response => {if (response.code == 200) {this.images = response.data;}});getGifs(paramsImage).then(response => {if (response.code == 200) {this.gifs = response.data;}});}});},},}
</script>

八、效果展示

九、项目演示

项目演示地址:http://175.24.75.121/#/login
用户名：visitor
密码：visitor

十、GITHUB

前端工程：https://github.com/STIll-clx/rms-admin-web
后端工程：https://github.com/STIll-clx/rms

资源管理系统-VUE使用ckplayer实现视频列表播放相关推荐

视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
vue仿抖音视频列表（兼容微信内置X5浏览器）
vue 仿抖音视频列表(兼容微信内置X5浏览器)https://blog.csdn.net/superKM/article/details/87603255制作仿抖音视频列表遇到很多坑,特别是安卓微 ...
微信公众号如何实现视频列表播放视频的功能
原创文章,2020-1-7,载转请说明来自CSDN 微信公众号如何实现视频列表播放视频的功能使用场景要求: 在微信公众号中,添加多个视频,且可实现视频列表的连播功能. 要求观看视频时无广告.稳定流畅 ...
公众号如何实现视频列表播放视频的功能
阿酷TONY原创文章,2020-1-14 公众号如何实现视频列表播放视频的功能使用场景要求: 在公众号中,添加视频列表播放的效果 1.创建视频列表专辑进入酷播云管理平台,打开"视频列表& ...
Android中使用JiaoZiVideoPlayer来实现视频列表播放的效果
目的:我这边是想做类似于斗鱼直播里的视频模块的视频列表播放形式. 思路:使用第三方插件--JiaoZiVideoPlayer.GitHub地址:https://github.com/lipangit/ ...
这就是视频列表二维码，一个二维码搞定视频列表播放
文章原创转载请注明出处来自CSDN 2020-1-5 // 我是视频砖家,只关注视频应用. 我以前写视频二维码的教程,今天再上一个原创的视频列表二维码教程吧 // 视频列表二维码教程基于酷播云 ...
jQuery层叠式视频列表播放
jQuery层叠式视频列表播放 jQuery悬挂层叠式的图片列表点击视频播放,带左右按钮控制上下一个视频轮播切换效果.这是一款视频列表播放布局代码. 演示地址下载地址
仿抖音视频自动播放html,vue 仿抖音视频列表（兼容微信内置X5浏览器）
制作仿抖音视频列表遇到很多坑,特别是安卓微信内置浏览器,让人脑壳疼,核心代码不多便于理解组件用到了vant 中的swiper滑动组件 h5 原生 video 属性 webkit-playsinl ...
20190227最近比较纠结的问题vue的video中视频的播放和nginx-rtmp的推流以及什么时候推流的分析
1.vue中的video的使用(支持MP4) Vue中引入Video.js视频播放器参考:https://www.jianshu.com/p/8b8023c7ed37 Video.js是一个有着HT ...

资源管理系统-VUE使用ckplayer实现视频列表播放

一、下载ckplayer插件

二、加压后将ckplayer放进VUE项目的static目录下：

三、在index.html中引入ckplayer.js文件

四、创建VUE组件

五、引用VUE组件

六、调用VUE组件

七、数据加载

八、效果展示

九、项目演示

十、GITHUB

资源管理系统-VUE使用ckplayer实现视频列表播放相关推荐

最新文章

热门文章

资源管理系统-VUE使用ckplayer实现视频列表播放

一、 下载ckplayer插件

二、加压后将ckplayer放进VUE项目的static目录下：

三、在index.html中引入ckplayer.js文件

四、创建VUE组件

五、引用VUE组件

六、调用VUE组件

七、数据加载

八、效果展示

九、项目演示

十、GITHUB

资源管理系统-VUE使用ckplayer实现视频列表播放相关推荐

最新文章

热门文章

一、下载ckplayer插件