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样式，
阿里云支持在线调试视频地址： https://player.alicdn.com/aliplayer/setting/setting.html
里面有h5版本，flash版本，选择你需要的版本，放入你的直播流，可以在线播放测试，
<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>
在代码里面拿到在线的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="//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/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:'//player.alicdn.com/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.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>
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。若有错误，请评论，会及时修改。
4538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
