阿里云Aliplayer视频播放（web播放器）

1.官方文档https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV

2.阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术

Flash
Html5

3.在index.html中引入：

 <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>

4.按需引入（根目录下有个lib文件夹，里面是下载好的这些配置js）：

import "../../../lib/aliyun-upload-sdk-1.5.0.min.js"
import "../../../lib/aliyun-oss-sdk-5.3.1.min.js"

5.html部分：

div class="prism-player" id="myPlayer"></div>

6.初始化部分：

data() {return {isPlay: false,PlayAuth:'',videoUrl:'',videoId:'',coverUrl:'',player:''};},

7.获取凭证，拿到视频id

this.getToken(getisvideoApi,{'videoId':this.resourceUrl},res=>{//通过接口拿到凭证this.PlayAuth=res.data.PlayAuth//拿到封面this.coverUrl=res.data.VideoMeta.CoverURLvar that=this//先判断是否有没有播放器容器，存在的话就要注销if(this.player){this.player.dispose()}this.player = new Aliplayer({"id": "myPlayer",      //播放器外层容器的dom元素id"vid":this.resourceUrl,     //视频id"playauth": this.PlayAuth, // 播放凭证"width": "100%",        //样式"height": "700px",     //样式"autoplay": false,  // 自动播放"isLive": false,    // 直播"cover": this.coverUrl,     //播放器默认封面图片,需要autoplay为’false’时，才生效"rePlay": false,    // 循环播放"playsinline": true,  //H5是否内置播放"preload": false,    //播放器自动加载"language": "zh-cn",     "controlBarVisibility": "always",  //控制面板的实现 ‘click’ 点击出现、‘hover’ 浮动出现、‘always’ 一直在"useH5Prism": true,    //指定使用H5播放器'encryptType':1,},function(){// console.log("playAuth:",that.playAuth);//  player.replayByVidAndPlayAuth(that.resourceUrl,that.PlayAuth)console.log("创建成功了")});})

阿里云Aliplayer视频播放（web播放器）相关推荐

android阿里云基础视频播放器
android阿里云基础视频播放器记录: 1.阿里云视频播放器sdk地址:https://help.aliyun.com/document_detail/61910.html?spm=a2c4g.11 ...
阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
React+阿里云Aliplayer播放器实现rtmp直播（推流时间差，重启播放器，计时观看）
需求前端框架为React 用阿里云播放器Aliplayer播放直播使用的rtmp协议资料阿里云播放器 Web端文档:https://help.aliyun.com/document_detai ...
阿里云点播 web 播放器
浅谈最近遇到很多人使用阿里云点播 web 播放器,通过 STS 令牌的方式去播放 MTS 转码完成后的资源出现问题,"路见不平一声吼,写个过程先献丑",只是做了最基础的功能,看官 ...
阿里web播放器微信浏览器打开进度条设置和时间获取
解决的问题: 1.阿里云的web播放器:移动端(安卓是红米手机和苹果11)在微信浏览器打开适用,pc端谷歌浏览器打开适用,其他没测. 2.全代码直接用,进度条没办法完全禁止拖动,只能快进就让他回到上一 ...
阿里云视频直播 web前端[移动端] Aliplayer的简单案例
阿里云视频直播 web前端[移动端] Aliplayer的简单案例最近做了一个功能就是播放后台提供的各种直播视频,格式在未确定的情况下,刚开始以为简单的一个video标签就能播放视频,后面才发现各种 ...
百度网盘播放地址html,百度云web播放器cyberplayer的flv播放地址一定要支持跨域访问如何设置...
cyberplayer, 官方demo 百度云web播放器: Cyberplayer3.0 Demo http://cyberplayer.bcelive.com/demo/new/index.htm ...
Web播放器 TcPlayer——腾讯直播sdk的网页播放器
https://www.qcloud.com/document/product/267/7479 功能介绍腾讯云Web播放器主要解决在手机浏览器和PC浏览器上播放音视频流的问题,使您的视频内容可以不 ...
雷火神山直播超两亿，Web播放器事件监听是怎么实现的？
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...

阿里云Aliplayer视频播放（web播放器）

阿里云Aliplayer视频播放（web播放器）相关推荐

最新文章

热门文章