vue项目整合ckplayer

1.下载ckplayer资源

下载地址：https://www.ckplayer.com/down/

2.vue项目中引入资源
将下载下来的ckplayer资源包中的ckplayer文件夹拷贝到Vue项目中static文件夹中

在index.html中引入ckplayer.js资源

 <script type="text/javascript" src="./static/ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>

3.vue页面中使用ckplayer

<template>
<div style="width: 100%;height: 100%;"><div class="video" id="video" ></div>
</div>
</template>
<script>
export default {components: {},data () {return {}},computed: {},mounted () {this.loadCkplayer();},created (){},methods: {loadCkplayer(){var videoObject = {container: '.video', //“#”代表容器的ID，“.”或“”代表容器的classvariable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象autoplay:true,live:true,overspread:true,//是否让视频铺满播放器html5m3u8:true,//m3u8-hls形式播放视频// video: 'rtmp://58.200.131.2:1935/livetv/cctv1'//视频地址video:'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'//视频地址};window.player = new ckplayer(videoObject);}}
}
</script>

vue项目整合ckplayer相关推荐

Springboot项目与vue项目整合打包
我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定 ...
cordova+vue项目整合
1.cordova项目新建 : learn-cordova 安装: $npm install -g cordova 版本: $cordova -v 创建: $cordova create learn- ...
vue项目整合UEditor看这一篇就够了
前言 vue整合UEditor的需求,在整合过程中遇到不少问题,关于这方面在网上的资料也不少,但是没有一个能解决问题,在开发的过程中,几乎所有的问题能出现的都遇到了,比如图片上传提示没有后端服务配置, ...
spring boot整合vue项目
博主公司开发的某个项目是前后台分离的,前台是使用vue开发的,后台使用的是spring boot.那么前台发布的时候其实使用的spring boot启动了一个服务.简单说明下如何使用spring bo ...
【linux】【jenkins】自动化运维三整合gitlab、docker发布vue项目
由于工作需要,这里我先创建一个vue的工程. 1.首先安装好gitlab相关插件:GitLab.GitLab Hook.NodeJS 插件安装参考:https://www.cnblogs.com/jx ...
基于Vue+SpringCloudAlibaba微服务电商项目实战-构建会员服务-011：基于Vue快速整合会员服务接口
011:基于Vue快速整合会员服务接口 1 构建前端Vue项目调用后端接口实现联合登录效果演示 2 什么是微服务前后端分离开发的模式 3 联合登录接口接口简单回顾 4 前后端分离解决跨域的问题 5 V ...
基于Idea从零搭建一个最简单的vue项目
一.需要了解的基本知识 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.N ...
教你搭建基于typescript的vue项目
自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合. ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...

vue项目整合ckplayer

vue项目整合ckplayer相关推荐

最新文章

热门文章