阿里播放器使用Aliplayer
由于业务需要,要找一款可以支持直播和录播的播放器。传统播放器,又没有太好的封装和集成。所以找到了Aliplayer(传送门 https://help.aliyun.com/document_detail/62941.html?spm=a2c4g.11186623.6.856.6fd54658nrPGxy#h2--3)
人狠话不多,直接来重点。
文档上也写了怎么引入播放器,可还是再说下,至今我还没发现npm 可以安装这个播放器。
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.4/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.4/aliplayer-min.js"></script>
如果是SPA(single-page application)页面,在index.html引入就好。
1.页面准备
2.初始化
3.播放
点击中间的播放,就可以直接开始播放了。但是我做了一个小小的封装,虽然是demo,也是为了完成业务上的要求。
ready这个东东,不要忘记了,为什么我会单独来讲。如果我们想在初始化的时候,设定播放进度。也就是说我们想在视频的前1分钟开始播放的时候,
像这样就可以实现了。
4.观看时长,也就是我们常说的试看功能, 这里分两种情况:a,正常播放,b,拖拽(快进)
a.如果currentTime大于你想要的值就会结束播放。
b.如果currentTime大于你想要的值就会结束播放。
5.设置控制栏的元素。
我以前是用找到元素直接隐藏的方式,虽然是黑科技,但是效果还是实现了,官方也有写怎么操作,功能一样,只是看起来优雅很多。
x和y是调整位置的。
6.前面说到直播,如果是直播,肯定不希望用户暂停对不,m3u8的延迟特别严重。我是用的flv,但是如果点击播放区域的话,会暂停直播,然后就会报错。当然用户还是希望可以有控制栏的元素存在,比如音量,全屏等等。
我的解决方案是用一个遮罩层,让用户不能点击播放区域。这个遮罩层的宽度与播放器一样大,唯一不同的是,要把控制栏的高度扣除,这样来设定,用户又可以控制音量和全屏这些东西,又不能点击视频播放区域,就不会影响使用。
转载于:https://www.cnblogs.com/ruose/p/10675728.html
阿里播放器使用Aliplayer相关推荐
- react项目中使用阿里播放器播放视频,包括切换视频,播放定时跳转(兼容ios和andro),播放完成
react项目中使用阿里播放器播放视频,包括切换视频,播放定时跳转(兼容ios和andro),播放完成 1.index.html引入阿里播放器的cdn <link rel="style ...
- uniapp使用阿里播放器
阿里播放器需要引入js和css所以用了下面的方法,创建script,然后引入连接. 刚开始我是在页面的created中写的,但是会出现第一次的时候aliplayer没有创建成功,undefined,如 ...
- 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...
- uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签 前言 首先引入资源文件 需要创建index.html 模板文件 flv.js video.j ...
- Android开发阿里播放器
最近在接阿里播放器,记录下:后面不断更新 一.播放本地视频和网络视频: 本地视频:url = Environment.getExternalStorageDirectory().getPath()+& ...
- 直播流播放,视频监控/直播监控。 使用火山引擎VePlayer播放50+直播流保证流程运行。思路理解后类比腾讯TRTC和阿里播放器
大家感觉有用的话,麻烦点赞收藏一下.也是踩坑踩出来的. 目标:50个直播流同时渲染,保证视频流播放正常. 代码在最后面,重点是 1. 视频流为 m3u8格式.(如果服务端传递回flv地址,大家自己re ...
- 阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
- 苹果CMS V10 整合阿里云播放器-带记忆播放
这篇整合教程加了阿里播放器的记忆功能,去除了弹幕,资源预加载等功能. 有人会说,我用ck .dp不好吗?为啥要用aliplayer,阿里播放器的记忆功能很给力,比如手机播放页面在后台放了很久,隔了几天 ...
- 苹果CMSV10整合aliplayer播放器/带记忆播放
aliplayer 阿里播放器的记忆功能很给力,这篇整合教程加了阿里播放器的记忆功能,去除了弹幕,资源预加载等功能. 使用方法: 1.进入[后台],点击顶部到导航[视频],选择左边导航中的[播放器], ...
- 阿里云SDK播放器集成
android阿里云基础视频播放器记录: 1.阿里云视频播放器sdk地址:https://help.aliyun.com/document_detail/61910.html?spm=a2c4g.11 ...
最新文章
- java 外来类,外来的Matplotlib图(tkinter中的情节)
- 初识Tcl(十一):Tcl 命名空间
- leetcode算法题--在排序数组中查找数字 I
- Flash Builder4.7极其简单破解方法-三步搞定(亲测)
- mmsPlayer 2.0 将开源java部分
- python中的zip函数详解_python中的 zip函数详解
- 家里电脑怎么控制公司电脑?电脑远程控制的几种方式
- 将字符串数组含有特定字符的值输出{“张三丰“,“张翠山“,“张无忌“,“宋远桥“,“莫声谷“,“俞正声“}
- 计算机网络技术实训室管理制度,计算机实验室管理制度
- android内存dump分析,闭眼能敲,Android内存分析command
- 蛋白质二级结构预测-Chou-Fasman预测方法
- 使用Nginx访问日志统计PV和UV
- 再读《终身成长》——重塑思维
- Java MediaMetadataCompat
- SAS学习笔记(二)排序、打印和汇总数据
- 图片如何添加水印文字?如何设置照片水印?
- 基于android的计步器文档,基于Android的计步器(Pedometer)的讲解(六)
- 【django】HttpRequest对象的属性和路由补充
- 免费合同管理软件有哪个好用?有哪些功能?
- user interface