【视频直播篇五】vue-cli3集成vue-aliplayer-v2

前言

这个视频直播出了一个系列，以下文章是几个播放器的使用教程

【视频直播篇一】入门篇
【视频直播篇二】vue-cli3集成LivePlayer
【视频直播篇三】vue-cli3集成vue-video-player
【视频直播篇四】vue-cli3集成flv.js
【视频直播篇六】videojs的使用
【视频直播篇七】Aliplayer的使用

正文

安装插件

npm install vue-aliplayer-v2 --save

编写页面

<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"><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="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.3/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: '//player.alicdn.com/video/aliyunmedia.mp4',show: true,isShowMultiple: false}},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">* {margin: 0;padding: 0;}.remove-text{text-align: center;padding: 20px;font-size: 24px;}.show-multiple{display: flex;.multiple-player{width: calc(100% / 4);margin: 20px;}}.player-btns{width: 100%;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>

【视频直播篇五】vue-cli3集成vue-aliplayer-v2相关推荐

Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
vue Cli3与vue Cli2的改变
vue Cli3与vue Cli2的区别常用命令官方文档创建文件启动项目目录结构 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统常用命令 vue -V 查看本地 vue ...
Vue cli3 或 Vue cli4 配置多入口多页面问题（详解）
本项目用的是Vue cli4,如果是vue cli3也是可以参考使用的省略创建项目这个步骤,接下来在创建好的项目里找到public文件夹,复制多个index.html入口文件,并且修改名称: 每个入 ...
VUE cli3 搭建vue项目引入EasyUI框架，出现错误！！！You are using the runtime-only build of Vue where the template com
EasyUI框架是我本科时候后端开发的一个前端框架,用起来比较方便,缺点就是风格.颜色.主题不太行,但是现在济南的很所公司还用easyui开发呢!!本文主要在这里记录一下主要的配置情况,对程序员来说, ...
基于Uni-APP多端「h5+小程序+App」高仿抖音小视频|直播|聊天实例
uni-ttLive 基于uni-app+uView-ui跨端开发短视频+直播聊天实例. 全新研发的一款多端仿制抖音短视频+直播+聊天项目,基于uniApp+Vue.js+Vuex+Nvue+uVie ...
视频直播平台源码关于Facebook登录、分享接入流程
现在,视频直播平台移民三方账号登录.分享功能是最基本的功能设置,而且随着互联网技术的发展,很多视频直播平台源码需要对Facebook.Twitter.Line等国外APP进行接入,从而实现用户流量的增 ...
Vue + WebRTC 实现音视频直播（附自定义播放器样式）
1. 什么是WebRTC 1.1 WebRTC简介 WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频 ...
在vue中使用海康插件实现视频监控视频直播方法二(RTMP流加Flash加swf)
在vue中使用海康威视实现视频监控,视频直播方法二(RTMP流加Flash加swf) 第一步用npm装这个几个包 "video.js": "^6.6.0",& ...
vue实现rtsp视频直播流
实现摄像头的直播功能其实有许多方案,像是安装vlc插件.rtsp转rtmp然后使用videojs通过flash播放rtmp**(由于chrome已经不使用flash所以放弃使用videojs,并且vi ...
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步用npm装这个几个包 "video.js": "^6.6.0&quo ...

【视频直播篇五】vue-cli3集成vue-aliplayer-v2

前言

正文

【视频直播篇五】vue-cli3集成vue-aliplayer-v2相关推荐

最新文章

热门文章