1、安装vue-aliplayer-v2依赖
npm install vue-aliplayer-v2
2、在main.js中引入依赖
import VueAliplayerV2 from 'vue-aliplayer-v2';Vue.use(VueAliplayerV2);
3、在需要创建播放器的vue页面粘贴如下代码。
阿里云播放器有两个版本，h5版本（支持动态切换），flash版本（不支持动态切换），
1、引入js和css样式，
阿里云支持在线调试视频地址： /aliplayer/setting/setting.html
里面有h5版本，flash版本，选择你需要的版本，放入你的直播流，可以在线播放测试，
<link rel="stylesheet" href="/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" /><script type="text/javascript" charset="utf-8" src="/de/prismplayer/2.9.3/aliplayer-min.js"></script>
在代码里面拿到在线的js和css样式连接，在本地创建相同名字的js和css样式，在将在线的复制到本地放在你vue项目的public文件里面就可以了，没有可以创建一个，在html里面引入静态的css和js。也可以直接用在线的。离线的情况下可以复制。
<link rel="stylesheet" href="<%= BASE_URL %>cdn/aliplayer/2.9.3/aliplayer-min.css"><script src="<%= BASE_URL %>cdn/aliplayer/2.9.3/aliplayer-min.js"></script>
如果是单体项目，直接将整个代码复制下来就是完整的播放器了。
复制下面的代码到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"><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="///video/aliyunmedia.mp4">播放源1</option><option value="///user-upload/nXPDX8AASx.mp4">播放源2</option><option value="//tbm-/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888">播放源3</option><option value="//ivi./hls/cctv1.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><script>export default {data(){return {options: {// source:'///video/aliyunmedia.mp4',isLive: true, //切换为直播流的时候必填（true-直播状态，false-普通模式，播放器普通视频）},source: 'rtmp://23.166.0.133:30140/vpaas/34020000001310000207356ABC00',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./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>
4、flash版本
如果你需要用到flash版本，按照上面的方式将js和css复制到本地，在复制下面的代码。
<template><div id="app"><div class="show-multiple" v-if="show_rtmp"><template><vue-aliplayer-v2 class="multiple-player" :source="rtmp" ref="VueAliplayerV2" :options="options" /></template><p class="remove-text" v-if="!show_rtmp">播放器已销毁!</p></div><div class="player-btns"><span @click="show_rtmp = !show_rtmp">{{ show_rtmp ? "销毁" : "重载" }}</span></div><div class="show-multiple" v-if="show_rtsp"><template><vue-aliplayer-v2 class="multiple-player" :source="rtsp" ref="VueAliplayerV2" :options="options" /></template><p class="remove-text" v-if="!show_rtsp">播放器已销毁!</p></div><div class="player-btns"><span @click="show_rtsp = !show_rtsp">{{ show_rtsp ? "销毁" : "重载" }}</span></div><div class="show-multiple" v-if="show_flv"><template><vue-aliplayer-v2 class="multiple-player" :source="flv" ref="VueAliplayerV2" :options="options" /></template><p class="remove-text" v-if="!show_flv">播放器已销毁!</p></div><div class="player-btns"><template><span @click="play()">播放</span><span @click="pause()">暂停</span><!-- <span @click="replay()">重播</span> --><!-- <span @click="getCurrentTime()">播放时刻</span> --><span @click="getStatus()">获取播放器状态</span></template><span @click="show_flv = !show_flv">{{ show_flv ? "销毁" : "重载" }}</span></div></div></template><script>export default {data() {return {rtmp: 'rtmp://23.166.0.133:30140/vpaas/34020000001310000211286E0C0E',rtsp: 'rtsp://23.166.0.133:30132/34020000001310000211286E0C0E',flv: 'http://23.166.0.133:30141/live?port=9000&app=vpaas&stream=34020000001310000211286E0C0E',show_rtmp: false,show_rtsp: false,show_flv: true,options: {//source: "http://23.166.0.133:30141/live?port=9000&app=vpaas&stream=3402000000131000021131742D52",isLive: true, //切换为直播流的时候必填true为直播，false为普通模式//format: "flv", //切换为直播流的时候必填width: "100%",height: "500px",autoplay: true,rePlay: false,showBuffer: true,snapshot: false,useFlashPrism: true,// 开启flash播放模式skinLayout: [{name: "bigPlayButton",align: "blabs",x: 30,y: 80,},{name: "errorDisplay",align: "tlabs",x: 0,y: 0,},{name: "infoDisplay",},{name: "controlBar",align: "blabs",x: 0,y: 0,children: [{name: "liveDisplay",align: "tlabs",x: 15,y: 25,},{name: "fullScreenButton",align: "tr",x: 10,y: 25,},{name: "volume",align: "tr",x: 10,y: 25,},],},],}}},methods: {play() {this.$refs.VueAliplayerV2.play();},pause() {this.$refs.VueAliplayerV2.pause();},// replay(){重播//this.$refs.VueAliplayerV2.replay();// },// getCurrentTime(){//播放时刻//// this.$refs.VueAliplayerV2.getCurrentTime();//this.source = 'http://23.166.0.133:30141/live?port=9000&app=vpaas&stream=34020000001310000211745A7359';// },getStatus() {const status = this.$refs.VueAliplayerV2.getStatus();console.log(`getStatus:`, status);alert(`getStatus:${status}`);},},};</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 {margin-top: 10px;}.source-input {margin-top: 10px;padding: 5px 10px;width: 80%;border: 1px solid #ccc;}</style>
目前谷歌不支持flash，谷歌双核浏览器支持flash。若有错误，请评论，会及时修改。
如果觉得《阿里云播放器直播rtsp rtmp flv流 flash播放直播流》对你有帮助，请点赞、收藏，并留下你的观点哦！
