阿里云视频直播 web前端[移动端] Aliplayer的简单案例

最近做了一个功能就是播放后台提供的各种直播视频，格式在未确定的情况下，刚开始以为简单的一个video标签就能播放视频，后面才发现各种问题，video只是能播放一些常见的音视频格式，video是HTML5的新标，兼容这块就有很多浏览器不支持，主要兼容不是浏览器不支持，更多的是video不支持音视频格式。

video兼容
一共支持三种格式：Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

NO：代表不支持这款浏览器。
X.0+：表示支持这款及版本更高的浏览器。

MP4 = MPEG4 文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

Aliplayer支持的格式

在移动端无法播放flv格式端直播流，甚至是bilibili的Flv.js也无法支持移动端进行直播。
Flv.js在移动端导致flvjs.isSupported()方法无法获取到，直接报undefined，经过测试，发现bilibili在手机浏览器可以进行播放，很奇怪，发现别人能做到，相信自己也能做到，直到后面怎么也实现不了，后面看了bilibili的移动端浏览器页面的直播居然是m3u8格式的直播源，尴了个尬。
最后实在没办法，只能交给后台进行格式转换才实现直播源播放。

下面是我的源码：
1、引入

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

2、html

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

3、js


var player = new Aliplayer({"id": "player-con","source": "//player.alicdn.com/video/aliyunmedia.mp4",//视频地址，支持mp4、m3u8"width": "100%","height": "500px","autoplay": true,"isLive": false,"rePlay": false,"playsinline": true,"preload": true,"controlBarVisibility": "hover","useH5Prism": true
}, function (player) {console.log("The player is created");}
);

aliyunmedia在移动端测试，只测试到了mp4、m3u8、flv，flv格式无法播放，需要flash播放器。

阿里云视频直播 web前端[移动端] Aliplayer的简单案例相关推荐

简易:阿里云视频直播，用户端按需求实现推流播流URL
简单介绍一下,阿里云的播流推流地址的实现方式. 相关文档路径:https://help.aliyun.com/document_detail/85018.html?spm=5176.11202509. ...
深度解读：阿里云视频直播功能升级
2022年注定是体育超级大年,冬奥.亚运会.大运会.世界杯等各类大型体育赛事应接不暇.随之而来便是各类赛事直播,客户对直播服务要求变得越来越高,视频直播技术创新显得格外重要.如何利用直播技术创新降低线 ...
阿里云视频直播使用详细步骤
目录一.阿里云视频直播 1.什么是视频直播 2.视频直播架构 3.官方文档链接二.使用流程 1.使用条件 2.添加推流域名和播流域名 3.配置CNAME 4.关联推流域名和播流域名 5.生成推流地 ...
首批唯一！阿里云视频直播服务获信通院首批唯一认证
简介:阿里云视频直播服务 7 月 28 日,由中国信息通信研究院主办的 2021 可信云大会上,阿里云凭借在视频直播 "云 - 边 - 端" 的产品技术优势,以最高标准通过了可信云 ...
超级详细！java实现阿里云视频直播功能
java实现阿里云视频直播准备工作 [官方地址](https://help.aliyun.com/document_detail/198676.html?spm=a2c4g.446769.0.0.1 ...
java SpringBoot 集成阿里云视频直播完成直播功能
经历了几天的周折,近期才把项目完成,在这里与大家分享一下踩坑之路,也方便日后有类似项目,可以借阅一番开发直播前先满足已下条件 1.开通视频直播功能 2.购买好了OSS存储 3.购买两个域名并且备案好 ...
阿里云视频直播PHP-SDK
阿里云视频直播配置及 PHP-SDK 接入教程准备工作域名管理配置鉴权地址生成器及DEMO演示-熟悉鉴权接入SDK 推流回调的配置阿里云视频直播配置及 PHP-SDK 接入教程 ...
阿里云视频直播推流和播流地址生成
记录学习阿里云视频直播准备环境: 1.已开通阿里云视频直播服务. 2.2个域名:一个用于推流,一个用于播流. 3.在视频直播服务里面找到域名配置,配置好播流和推流域名之间的关系. 4.下载Vlc和o ...
阿里云视频直播，使用obs推流验证是否成功
阿里云视频直播推流地址验证首先,根据上篇文章得到推流地址以及播流地址,从官方下载obs工具和vlc工具,下面开始验证地址是否正确? 演示 1.打开obs工具,找到右下角的设置按钮,点击推流,将推流地 ...

阿里云视频直播 web前端[移动端] Aliplayer的简单案例

阿里云视频直播 web前端[移动端] Aliplayer的简单案例

阿里云视频直播 web前端[移动端] Aliplayer的简单案例相关推荐

最新文章

热门文章