在Vue中使用Aliplayer，做视频播放或者视频监控

直接上干货，看代码

<template><div id="videomonitoring"><div><el-card class="box-card"><div style="height:600px"><div class="prism-player" :id="playerId" :style="playStyle"></div></div></el-card></div></div>
</template>
<script>
export default {// 在vue中怎么使用Aliplayername: "Aliplayer",props: {playStyle: {type: String,default: ""},aliplayerSdkPath: {// Aliplayer 代码的路径type: String,default: "//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js"},autoplay: {type: Boolean,default: true},isLive: {type: Boolean,default: false},playsinline: { // H5是否内置播放，有的Android浏览器不起作用。type: Boolean,default: false},width: {type: String,default: "100%"},height: {type: String,default: "600px"},controlBarVisibility: { // 控制面板的实现，默认为‘hover’， 可选的值为：‘click’、‘hover’、‘always’。type: String,default: "hover"},useH5Prism: {type: Boolean,default: false},useFlashPrism: {type: Boolean,default: false},vid: {type: String,default: ""},playauth: {type: String,default: ""},source: {type: String,default: "rtmp://........./hls/shiyanshi"//这个换成你的视频地址，因为我做的是视频监控，在这里放的rtmp推流地址},cover: {type: String,default: ""},format: {type: String,default: "m3u8"},skinLayout: {type: Array,default: function() {return [];}},x5_video_position: {type: String,default: "top"},x5_type: {type: String,default: "h5"},x5_fullscreen: {type: Boolean,default: false},x5_orientation: {type: Number,default: 2},autoPlayDelay: {type: Number,default: 0},autoPlayDelayDisplayText: {type: String}},data() {return {playerId: "aliplayer_" + Math.random().toString(36).substr(2),scriptTagStatus: 0,isReload: false,instance: null}},created() {if (window.Aliplayer !== undefined) {// 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器this.scriptTagStatus = 2;this.initAliplayer();} else {// 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码this.insertScriptTag();}},mounted() {if (window.Aliplayer !== undefined) {// 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器this.scriptTagStatus = 2;this.initAliplayer();} else {// 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码this.insertScriptTag();}/* const _this = this;_this.$nextTick(() => {var player = new Aliplayer({id: 'J_prismPlayer',width: '100%',autoplay: true,//支持播放地址播放,此播放优先级最高source : 'https://act.mcake.com/fangli/2018/pc/zhou-nian/video/zhounian-7.mp4',//播放方式二：点播用户推荐vid : '1e067a2831b641db90d570b6480fbc40',playauth : '',cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',            //播放方式三：仅MPS用户使用vid : '1e067a2831b641db90d570b6480fbc40',accId: '',accSecret: '',stsToken: '',domainRegion: '',authInfo: '',//播放方式四：使用STS方式播放vid : '1e067a2831b641db90d570b6480fbc40',accessKeyId: '',securityToken: '',accessKeySecret: '',// isLive: true,// getCurrentTime: _this.aaaa},function(player){console.log('播放器创建好了。')// console.log(player.getCurrentTime());});}); */},methods: {insertScriptTag() {const _this = this;let playerScriptTag = document.getElementById("playerScriptTag");// 如果这个tag不存在，则生成相关代码tag以加载代码if (playerScriptTag === null) {playerScriptTag = document.createElement("script");playerScriptTag.type = "text/javascript";playerScriptTag.src = this.aliplayerSdkPath;playerScriptTag.id = "playerScriptTag";let s = document.getElementsByTagName("head")[0];s.appendChild(playerScriptTag);}if (playerScriptTag.loaded) {_this.scriptTagStatus++;} else {playerScriptTag.addEventListener("load", () => {_this.scriptTagStatus++;playerScriptTag.loaded = true;_this.initAliplayer();});}_this.initAliplayer();},initAliplayer() {const _this = this;// scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成if ( _this.scriptTagStatus === 2 && (_this.instance === null || _this.reloadPlayer) ) {_this.instance && _this.instance.dispose();// console.log(document.querySelector("#" + _this.playerId));// document.querySelector("#" + _this.playerId).innerHTML = "";// Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建// 所以，我们只能在 nextTick 里面初始化 Aliplayer_this.$nextTick(() => {_this.instance = window.Aliplayer({id: _this.playerId,autoplay: _this.autoplay,isLive: _this.isLive,playsinline: _this.playsinline,format: _this.format,width: _this.width,height: _this.height,controlBarVisibility: _this.controlBarVisibility,useH5Prism: _this.useH5Prism,useFlashPrism: _this.useFlashPrism,vid: _this.vid,playauth: _this.playauth,source: _this.source,cover: _this.cover,// skinLayout: _this.skinLayout, // 说明：功能组件布局配置，不传该字段使用默认布局传false隐藏所有功能组件，请参照皮肤定制x5_video_position: _this.x5_video_position,x5_type: _this.x5_type,x5_fullscreen: _this.x5_fullscreen,x5_orientation: _this.x5_orientation,autoPlayDelay: _this.autoPlayDelay,autoPlayDelayDisplayText: _this.autoPlayDelayDisplayText});// 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去_this.instance.on("ready", () => {this.$emit("ready", _this.instance);});_this.instance.on("play", () => {this.$emit("play", _this.instance);});_this.instance.on("pause", () => {this.$emit("pause", _this.instance);});_this.instance.on("ended", () => {this.$emit("ended", _this.instance);});_this.instance.on("liveStreamStop", () => {this.$emit("liveStreamStop", _this.instance);});_this.instance.on("m3u8Retry", () => {this.$emit("m3u8Retry", _this.instance);});_this.instance.on("hideBar", () => {this.$emit("hideBar", _this.instance);});_this.instance.on("waiting", () => {this.$emit("waiting", _this.instance);});_this.instance.on("snapshoted", () => {this.$emit("snapshoted", _this.instance);});_this.instance.on("timeupdate", () => {_this.$emit("timeupdate", _this.instance);});_this.instance.on("requestFullScreen", () => {_this.$emit("requestFullScreen", _this.instance);});_this.instance.on("cancelFullScreen", () => {_this.$emit("cancelFullScreen", _this.instance);});_this.instance.on("error", () => {_this.$emit("error", _this.instance);});_this.instance.on("startSeek", () => {_this.$emit("startSeek", _this.instance);});_this.instance.on("completeSeek", () => {_this.$emit("completeSeek", _this.instance);});});}},/*** 播放视频*/play: function() {this.instance.play();},/*** 暂停视频*/pause: function() {this.instance.pause();},/*** 重播视频*/replay: function() {this.instance.replay();},/*** 跳转到某个时刻进行播放* @argument time 的单位为秒*/seek: function(time) {this.instance.seek(time);},/*** 获取当前时间 单位秒*/getCurrentTime: function() {return this.instance.getCurrentTime();},/***获取视频总时长，返回的单位为秒* @returns 返回的单位为秒*/getDuration: function() {return this.instance.getDuration();},/**获取当前的音量，返回值为0-1的实数ios和部分android会失效*/getVolume: function() {return this.instance.getVolume();},/**设置音量，vol为0-1的实数，ios和部分android会失效*/setVolume: function(vol) {this.instance.setVolume(vol);},/***直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换*@argument url 视频地址*@argument time 跳转到多少秒*/loadByUrl: function(url, time) {this.instance.loadByUrl(url, time);},/*** 设置播放速度*@argument speed 速度*/setSpeed: function(speed) {this.instance.setSpeed(speed);},/*** 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297*@argument w 播放器宽度*@argument h 播放器高度*/setPlayerSize: function(w, h) {this.instance.setPlayerSize(w, h);},/*** 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8）之间切换,暂不支持直播rtmp流切换*@argument vid 视频id*@argument playauth 播放凭证*/reloaduserPlayInfoAndVidRequestMts: function(vid, playauth) {this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth);},reloadPlayer: function() {this.isReload = true;this.initAliplayer();this.isReload = false;}},}
</script><style lang="postcss" scoped>@import 'https://g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css';#videomonitoring{width: 100%;
}
#videomonitoring>div{height:100%;
}
</style>

在Vue中使用Aliplayer，做视频播放或者视频监控相关推荐

vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法配置和启用海康插件详情看本人博客链接:https://blog.csdn.net/jinglianglove/article/de ...
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步用npm装这个几个包 "video.js": "^6.6.0&quo ...
在vue中使用海康插件实现视频监控视频直播方法二(RTMP流加Flash加swf)
在vue中使用海康威视实现视频监控,视频直播方法二(RTMP流加Flash加swf) 第一步用npm装这个几个包 "video.js": "^6.6.0",& ...
android中使用SurfaceView做视频播放器--视频切换无缝连接
Android中的视频用到的有view.SurfaceHolder和view.SurfaceView,还有就是用到了MediaPlayer.OnBufferingUpdateListener和Medi ...
vue中使用echarts做一个雷达图
在vue中使用echarts做一个雷达图效果如图首先 1.安装echarts npm install echarts -S 2.使用全局使用在main.js中 // 引入echarts imp ...
vue中使用HKPlayer播放器连接摄像头监控
vue中使用HKPlayer播放器连接摄像头监控效果图可以控制摄像头移动代码 <template><div style="user-select: none;&quo ...
在vue中使用海康插件实现视频实时监控(海康插件)
在vue中使用海康插件实现视频实时监控(海康插件) 首先下载并安装海康插件 webcontrol.exe 然后直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些 ...
手把手教你做一个物联网视频监控项目（三）流媒体方案实现
往期文章手把手教你做一个物联网视频监控项目(一) 介绍手把手教你做一个物联网视频监控项目(二)MJPG-streamer方案实现文章目录前言一.软硬件准备二.流媒体方案的实现之FFmpeg ...
vue中app.use()做了什么？
1.为什么要app.use(参数) 注册组件,且注册的组件全局可用,或在vue原型上添加内容. use参数需要什么类型的?vue规定:参数要么是对象形式,且必须有install这个方法属性,或者参数为 ...
Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...

在Vue中使用Aliplayer，做视频播放或者视频监控

在Vue中使用Aliplayer，做视频播放或者视频监控相关推荐

最新文章

热门文章