从零开始的VUE项目-09（vue-alipayer-v视频播放）

代码svn地址（用户名：liu，密码;123）

这一篇来说视频，使用的是基于 Alipayer封装的组件vue-alipayer-v2，地址

效果图：

现在是直播模式，应该是可以播放监控摄像头的，但我没有能用的监控摄像头IP。

还记得我们之前的模拟实时数据监测图层吗？

这里有个在线视频，之前是放上个视频播放，现在来改一下。

1，首先运行命令安装vue-aliplayer-v2组件

npm install vue-aliplayer-v2

2,将下面的文件解压缩后放到src文件夹里

链接：https://pan.baidu.com/s/1Z1Xk0kN-_SYjsAPduv4rqg
提取码：31w9
3，在views文件夹里新建AliPlayer.vue文件

<template><div id="app"><template v-if="!isShowMultiple && show"><vue-aliplayer-v2 :source="source"ref="VueAliplayerV2":options="options" /></template><div v-if="isShowMultiple && show"class="show-multiple"><template v-for="x in 5"><vue-aliplayer-v2 class="multiple-player":key="x":source="source"ref="VueAliplayerV2":options="options" /></template></div><!-- <p class="remove-text"v-if="!show">播放器已销毁!</p><div class="player-btns"> --><div style="text-align:center;margin-top:10px;height:50px"><el-button type="text"icon="el-icon-play"size="medium"@click="play()"style="height: 30px;width: 80px;">播放</el-button><el-button type="text"icon="el-icon-pause"size="medium"@click="pause()"style="height: 30px;width: 80px;">暂停</el-button><el-button type="text"icon="el-icon-replay"size="medium"@click="replay()"style="height: 30px;width: 80px;">重播</el-button></div><!-- </div>  --><!-- <div class="player-btns"><template v-if="!isShowMultiple && show"><span @click="play()">播放</span><span @click="pause()">暂停</span><span @click="replay()">重播</span><span @click="getCurrentTime()">播放时刻</span><span @click="getStatus()">获取播放器状态</span></template><span @click="show = !show">{{ show ? '销毁' : '重载' }}</span><span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span><span @click="showMultiple()">{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span></div>  --><!-- <div class="source-box"><span class="source-label">选择播放源(支持动态切换):</span><select v-model="source" name="source" id="source"><option value="//player.alicdn.com/video/aliyunmedia.mp4">播放源1</option><option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4">播放源2</option><option value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888">播放源3</option><option value="//ivi.bupt.edu.cn/hls/cctv1hd.m3u8">直播播放源4</option></select></div><div class="source-box"><span class="source-label">输入播放源(支持动态切换):</span><input class="source-input" type="text" v-model="source"></div> --></div>
</template>
<link rel="stylesheet" href="../aliPlayer/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="../aliPlayer/aliplayer-min.js"></script>
<script>import VueAliplayerV2 from 'vue-aliplayer-v2';export default {name: 'Live-Demo',components:{ VueAliplayerV2: VueAliplayerV2.Player },data(){return {options: {// source:'//player.alicdn.com/video/aliyunmedia.mp4',isLive: true,   //切换为直播流的时候必填（true-直播状态，false-普通模式，播放器普通视频）},source: null, //'//player.alicdn.com/video/aliyunmedia.mp4'show: true,isShowMultiple: false}},props: ["data"],created () {//this.source=this.data.IP+":"+this.data.PORT    //在线监控的IP加端口号this.source="//player.alicdn.com/video/aliyunmedia.mp4"  //模拟在线监控的固定视频},methods:{play(){this.$refs.VueAliplayerV2.play()},pause(){this.$refs.VueAliplayerV2.pause();},replay(){this.$refs.VueAliplayerV2.replay();},getCurrentTime(){// this.$refs.VueAliplayerV2.getCurrentTime();this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';},getStatus(){const status =  this.$refs.VueAliplayerV2.getStatus();console.log(`getStatus:`, status);alert(`getStatus:${status}`);},showMultiple(){this.isShowMultiple = !this.isShowMultiple;}}}
</script>
<style lang="less"  scoped>* {margin: 0;padding: 0;}.remove-text{text-align: center;padding: 20px;font-size: 24px;}.show-multiple{display: flex;.multiple-player{width: calc(80% / 4);margin: 20px;}}.player-btns{width: 80%;display: flex;justify-content: center;flex-wrap: wrap;span {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 150px;height: 40px;line-height: 40px;border: 1px solid #eee;background: #e1e1e1;border-radius: 10px;text-align: center;margin: 5px;cursor: pointer;}}.source-box{padding: 5px 10px;margin-bottom: 20px;.source-label{margin-right: 20px;font-size: 16px;display: block;}#source{margin-top: 10px;}.source-input{margin-top: 10px;padding: 5px 10px;width: 80%;border: 1px solid #ccc;}}
</style>

4，然后在DataMonitor.vue里引用，分三步

import aliPlayer from './AliPlayer.vue'

 components: { PieChart, aliPlayer },

 <el-tab-pane label="在线视频"><div style="width:460px;height:375px"><aliPlayer ref="video"></aliPlayer></div></el-tab-pane>

此时此刻，DataMonitor.vue完整代码：

<!-- 数据监测 -->
<template><section><el-tabs type="border-card"><el-tab-pane label="数据监测实时曲线"><!-- 图表 --><div ref="chart"style="width:460px;height:375px;"><PieChart ref="echarts"></PieChart></div></el-tab-pane><el-tab-pane label="在线视频"><div style="width:460px;height:375px"><aliPlayer ref="video"></aliPlayer></div></el-tab-pane></el-tabs></section>
</template><script>
import PieChart from "./MonitorChart.vue"; //引入自定义Echart饼图组件
import aliPlayer from './AliPlayer.vue'
export default {components: { PieChart, aliPlayer },data () {return {pieChart: {radius: '25%',pieData: [],pieDataName: [],},form: {}}},props: {info: {type: Object,default: () => {return {};}},layerid: {type: String,default: ""},lydata: {type: Object,default: () => {return {};}}},methods: {},mounted () {//传递来的数据this.form = this.info;//把你所需要数据赋值给data中的pieChart对象，然后获取对象中的键值var { radius, pieData, pieDataName } = this.pieChart;pieData = this.form.data;pieDataName = this.form.data.NAME;//数据渲染图表this.$refs.echarts.initChart(radius, pieData, pieDataName)}
}</script><style scoped>
.el-range-editor--mini.el-input__inner {height: 28px;left: 20px;top: 30px;
}
</style>

5，别忘了播放按钮的图标，这是自定义的，把下面三张图片，放到assets文件夹的images文件夹里

然后在blue.css里加上下面的代码

/*自定义按钮*/
.el-icon-play{background: url(../assets/images/播放.png) center no-repeat;background-size: cover;
}
.el-icon-pause{background: url(../assets/images/暂停.png) center no-repeat;background-size: cover;
}
.el-icon-replay{background: url(../assets/images/重播.png) center no-repeat;background-size: cover;
}.el-icon-play:before,.el-icon-pause:before,.el-icon-replay:before{content: "替";visibility: hidden;
}

好，可以了；系统又完善了一点，下一篇再见！

从零开始的VUE项目-09（vue-alipayer-v视频播放）相关推荐

vue3 项目创建(UI图形化界面方式，可视化操作Vue项目，vue ui)
vue3 项目创建 (UI图形化界面方式,可视化操作Vue项目,vue ui) 目录一.图形化界面方式搭建vue3 项目前提条件 1.检查node 和 @vue/cli 版本信息 2.升级你的 No ...
【vue项目】vue项目创建全流程，创建使用 vue-cli 搭建项目
一. 使用 vue-cli 搭建项目 1.安装vue/cli ,执行下面的命令安装或是升级 npm i -g @vue/cli npm i -g @vue/cli 安装报错如果安装报错如下 np ...
在Centos 7 上跑 vue 项目以及 Vue 热更新失效
安装npm yum install npm 安装vue npm install vue 安装vue-cli sudo npm install --global vue-cli 注意: 因为全局安装,会 ...
node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
vue项目html,Vue项目接口.html
Vue项目接口电商管理后台API接口文档接口说明接口基准地址:http://localhost:8888/api/private/v1/ 服务端已开启 CORS 跨域支持 API V1 认证统一 ...
IDEA中创建启动Vue项目--搭建vue项目
文章目录环境配置安装Vue-cli构建工具构建项目使用命令启动Vue项目使用idea启动Vue项目环境配置下载安装nodeJs 成功安装国内镜像或者是淘宝的npm镜像详情见博客:Nod ...
创建vue项目，vue项目自定义配置
对于新手来说配置vue项目的各个插件时,总是会出现插件版本和vue框架版本适配问题.这篇文章简单的讲一下vue创建项目时自定义项目插件的配置. 首先我们想要在桌面创建一个新的vue项目. 首先我们找到 ...
vue项目查看vue版本及cli版本
查看cli版本,执行如下: vue -V 查看vue版本 npm list vue
Vue项目搭建——Vue CLI安装失败解决方法
1.安装node 官网下载:https://nodejs.org/en/ 下一步安装 2.设置镜像要以管理员方式运行cmd npm install -g cnpm --registry=https: ...
【VUE项目】VUE+ElementUI电商后台管理系统
电商后台管理系统项目来源:https://www.bilibili.com/video/BV1x64y1S7S7?p=191&spm_id_from=333.1007.top_right_b ...

从零开始的VUE项目-09（vue-alipayer-v视频播放）

从零开始的VUE项目-09（vue-alipayer-v视频播放）相关推荐

最新文章

热门文章