首页 / 一门APP教程 / playList 播放列表 App开发接入视立方播放器

免费试用

中文化、本土化、云端化的在线跨平台软件开发工具，支持APP、电脑端、小程序、IOS免签等等

playList 播放列表 App开发接入视立方播放器

playList 播放列表 App开发接入视立方播放器

用做网页的技术做APP！
一门提供标准化的jsbridge-mini.js库，您只需要在页面引用并执行JS即可实现各种原生APP、原生PC的功能能力。

==================APP端==================
【APP端】（安卓版&苹果版）目前提供200+原生功能，2000+JS映射接口，用做网站的技术即可实现各种原生APP能力、APP demo地址https://www.yimenapp.com/doc/demo.cshtml下载教程：
♦ JS-SDK 引用方式：
♦ 普通网页 script 方式加载：下载最新版，请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库；
♦ js module 方式引用：npm install ym-jsbridge 具体请参考 npm package
一门APP开发平台通用JS

核心代码示例，详情参阅demo

//仅支持 Android 版
//播放列表，按顺序自动连续播放
jsBridge.txVideo.playList({
 title: '这是播放列表的名称',
 //必须，数组类型，视频源列表
 items: [
 {
 //列表图片
 poster: 'https://i.yimenyun.net/sys/player2.jpg',
 url : 'https://734.cdn-vod.huaweicloud.com/asset/c4aec16ec296cb8964f80845000cb958/play_video/fcb8827219c07153131eff228583e5a1_H.264_1280X720_HEAACV1_1500.mp4',
 title : '华为消费者业务品牌主题曲 Dream It Possible',
 desc : '时长 03:58'
 },
 {
 poster: 'http://1252463788.vod2.myqcloud.com/e12fcc4dvodgzp1252463788/28742df34564972819219071568/4564972819209692959.jpeg',
 appId : 1252463788,
 videoId : {
 fileId : '4564972819219071568',
 pSign : ''
 },
 title : '腾讯云视频',
 desc : '与美女对话'
 },
 {
 poster: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/1536584350_1812858038.100_0.jpg',
 multiURLs : [
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
 qualityName: '流畅'
 },
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f20.mp4',
 qualityName: '标清'
 },
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f30.mp4',
 qualityName: '高清'
 }
 ],
 title : 'MP4点播 多码率 URL 链接',
 playDefaultIndex: 1
 },
 {
 poster: 'https://i.yimenyun.net/sys/player4.jpg',
 url : 'http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4',
 title : 'MP4点播 Motor Live'
 },
 {
 poster: '',
 url : 'http://5815.liveplay.myqcloud.com/live/5815_89aad37e06ff11e892905cb9018cf0d4_900.flv',
 title : 'FLV 直播流'
 },
 {
 poster: 'https://i.yimenyun.net/sys/player5.jpg',
 url : 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.m3u8',
 title : 'HLS(m3u8) 直播流'
 }
 ],
 //可选，数字类型，开始播放的视频序号，默认 0（第一个）
 playDefaultIndex: 0,
 //可选，布尔类型，是否循环播放视频列表，默认 false
 loop : false,
 //可选，布尔类型，是否保留刘海（凹凸屏）区域，默认 false 即不保留（全屏视频会占用刘海区域）
 cutout: false
});

/*
参数说明：
{
 title: '', //可选，字符串类型，播放列表名称，显示在标题栏上
 items: [ //必须，视频列表清单数组
 { //以上 play 方式1, 2, 3 播放参数的任意组合
 },
 ...
 ],
 playDefaultIndex: 0 //可选，默认开始播放 items 列表中的视频序号
}
*/

A标签执行JS示例代码

<a href="javascript:void(0)" onclick="zhixing()">执行</a> 
<!-- 写入一个A标签href值为"javascript:void(0)"，定义点击事件onclick；-->
<script src="您的服务器URL/jsbridge-mini.js"></script>
<!-- 在您的服务器引入一门JS地址，请下载jsbridge-mini.js上传您自己的服务器获取链接；-->
<script type="text/javascript">
function zhixing() {


<!--这里可以直接复制JS核心代码到此{}括号内-->
//仅支持 Android 版
//播放列表，按顺序自动连续播放
jsBridge.txVideo.playList({
 title: '这是播放列表的名称',
 //必须，数组类型，视频源列表
 items: [
 {
 //列表图片
 poster: 'https://i.yimenyun.net/sys/player2.jpg',
 url : 'https://734.cdn-vod.huaweicloud.com/asset/c4aec16ec296cb8964f80845000cb958/play_video/fcb8827219c07153131eff228583e5a1_H.264_1280X720_HEAACV1_1500.mp4',
 title : '华为消费者业务品牌主题曲 Dream It Possible',
 desc : '时长 03:58'
 },
 {
 poster: 'http://1252463788.vod2.myqcloud.com/e12fcc4dvodgzp1252463788/28742df34564972819219071568/4564972819209692959.jpeg',
 appId : 1252463788,
 videoId : {
 fileId : '4564972819219071568',
 pSign : ''
 },
 title : '腾讯云视频',
 desc : '与美女对话'
 },
 {
 poster: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/1536584350_1812858038.100_0.jpg',
 multiURLs : [
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
 qualityName: '流畅'
 },
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f20.mp4',
 qualityName: '标清'
 },
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f30.mp4',
 qualityName: '高清'
 }
 ],
 title : 'MP4点播 多码率 URL 链接',
 playDefaultIndex: 1
 },
 {
 poster: 'https://i.yimenyun.net/sys/player4.jpg',
 url : 'http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4',
 title : 'MP4点播 Motor Live'
 },
 {
 poster: '',
 url : 'http://5815.liveplay.myqcloud.com/live/5815_89aad37e06ff11e892905cb9018cf0d4_900.flv',
 title : 'FLV 直播流'
 },
 {
 poster: 'https://i.yimenyun.net/sys/player5.jpg',
 url : 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.m3u8',
 title : 'HLS(m3u8) 直播流'
 }
 ],
 //可选，数字类型，开始播放的视频序号，默认 0（第一个）
 playDefaultIndex: 0,
 //可选，布尔类型，是否循环播放视频列表，默认 false
 loop : false,
 //可选，布尔类型，是否保留刘海（凹凸屏）区域，默认 false 即不保留（全屏视频会占用刘海区域）
 cutout: false
});

/*
参数说明：
{
 title: '', //可选，字符串类型，播放列表名称，显示在标题栏上
 items: [ //必须，视频列表清单数组
 { //以上 play 方式1, 2, 3 播放参数的任意组合
 },
 ...
 ],
 playDefaultIndex: 0 //可选，默认开始播放 items 列表中的视频序号
}
*/

}
</script>
<!--执行核心代码；
//如果需要进入页面就执行，去掉点击事件即可；-->

按钮执行JS示例代码

<button onclick="zhixing()" >执行</button>
<!-- //写一个按钮，定义点击执行事件； -->
<script src="您的服务器URL/jsbridge-mini.js"></script>
<!-- //在您的服务器引入一门JS地址，请下载jsbridge-mini.js上传您自己的服务器获取链接； -->
<script type="text/javascript">
function zhixing() {


<!--这里可以直接复制JS核心代码到此{}括号内-->
//仅支持 Android 版
//播放列表，按顺序自动连续播放
jsBridge.txVideo.playList({
 title: '这是播放列表的名称',
 //必须，数组类型，视频源列表
 items: [
 {
 //列表图片
 poster: 'https://i.yimenyun.net/sys/player2.jpg',
 url : 'https://734.cdn-vod.huaweicloud.com/asset/c4aec16ec296cb8964f80845000cb958/play_video/fcb8827219c07153131eff228583e5a1_H.264_1280X720_HEAACV1_1500.mp4',
 title : '华为消费者业务品牌主题曲 Dream It Possible',
 desc : '时长 03:58'
 },
 {
 poster: 'http://1252463788.vod2.myqcloud.com/e12fcc4dvodgzp1252463788/28742df34564972819219071568/4564972819209692959.jpeg',
 appId : 1252463788,
 videoId : {
 fileId : '4564972819219071568',
 pSign : ''
 },
 title : '腾讯云视频',
 desc : '与美女对话'
 },
 {
 poster: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/1536584350_1812858038.100_0.jpg',
 multiURLs : [
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
 qualityName: '流畅'
 },
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f20.mp4',
 qualityName: '标清'
 },
 {
 url : 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f30.mp4',
 qualityName: '高清'
 }
 ],
 title : 'MP4点播 多码率 URL 链接',
 playDefaultIndex: 1
 },
 {
 poster: 'https://i.yimenyun.net/sys/player4.jpg',
 url : 'http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.mp4',
 title : 'MP4点播 Motor Live'
 },
 {
 poster: '',
 url : 'http://5815.liveplay.myqcloud.com/live/5815_89aad37e06ff11e892905cb9018cf0d4_900.flv',
 title : 'FLV 直播流'
 },
 {
 poster: 'https://i.yimenyun.net/sys/player5.jpg',
 url : 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.m3u8',
 title : 'HLS(m3u8) 直播流'
 }
 ],
 //可选，数字类型，开始播放的视频序号，默认 0（第一个）
 playDefaultIndex: 0,
 //可选，布尔类型，是否循环播放视频列表，默认 false
 loop : false,
 //可选，布尔类型，是否保留刘海（凹凸屏）区域，默认 false 即不保留（全屏视频会占用刘海区域）
 cutout: false
});

/*
参数说明：
{
 title: '', //可选，字符串类型，播放列表名称，显示在标题栏上
 items: [ //必须，视频列表清单数组
 { //以上 play 方式1, 2, 3 播放参数的任意组合
 },
 ...
 ],
 playDefaultIndex: 0 //可选，默认开始播放 items 列表中的视频序号
}
*/

}
</script>
<!-- //执行核心代码；
//如果需要进入页面就执行，去掉点击事件即可； -->
相关知识：
buy拼团app定制开发
拼团APP定制开发是一种针对拼团模式的移动应用程序开发服务，通过该服务可以帮助企业或个人创建自己的拼团平台。拼团模式是一种在用户中非常受欢迎的购物方式，它通过集结一定数量的消费者一起购买同一种商品，以获取折扣或其他形式的优惠。下面将介绍拼团APP定制开发的
2023-07-14
app软件的开发费用与哪些因素相关
App软件的开发费用与很多因素相关，包括以下几个方面：1. 功能和复杂度：一个App的功能越多，复杂度越高，开发所需的时间和成本也会相应增加。例如，一个简单的计算器App相对来说开发费用会比较低，而一个包含复杂算法和大量交互的游戏App则需要更多的开发工作
2023-06-29
app开发高手
移动应用程序（App）是指能够在移动设备上运行的软件应用程序，这些移动设备就是大家平时使用的智能手机、平板电脑、手持电脑等便携式终端设备。与个人电脑相比，移动设备的处理能力、屏幕大小和内存容量等硬件资源有限，需要特别的技术来开发应用程序。因此，App 开发
2023-06-29
app程序开发自学教程
随着智能手机的普及，手机应用程序成为了人们日常生活中必不可少的一部分。因此，很多人开始学习开发手机应用程序，利用自己的编程技能创造出高质量的app。如果你想要自学开发app程序，那么本文将给你提供一些开发app程序的详细介绍和原理知识。1.选择开发语言首先
2023-05-06
app的开发者搞错了怎么改正
在移动应用的开发中，开发者很可能会犯错，这些错误可能会影响到应用的使用、安全性以及性能等方面。然而，及时发现和纠正这些错误，对于应用的可靠性、安全性以及用户体验等方面非常重要。以下就是针对APP开发者犯错的情况，提供一些修正错误的原则和方法。一、 错误的种
2023-05-06
android通用框架设计与完整电商app开发
Android平台的应用程序设计与开发需要使用到合适的框架，从而能够提高开发效率和应用程序的质量。在实际开发过程中，应该选择符合自身业务需求和技术水平的通用框架，并结合开源社区、社交网络的支持，以建立良好的开发生态。一些有代表性的通用框架如下：1. MVC
2023-05-06
一门产品
APP打包 小程序打包 EXE打包 云商城 Discuz app Wordpress app Webclip APP软著申请 APP上架 SSL加密 IOS免签版 vue做APP APP分发 IOS证书制作工具 安卓证书制作工具 安卓重签名工具 更多
一门文档
行业技术 安卓开发 IOS开发 互联网 Windows Macos 开放平台 JS-SDK 测试分发
三方平台
华为开放平台 OPPO开放平台 VIVO开放平台 小米开放平台 魅族开放平台 微信开放平台 支付宝开放平台 百度开放平台 腾讯开放平台
推荐模块
原生标题栏 扫一扫 广告启动屏 微信分享 侧边栏 AppsFlyer统计 支付宝支付 X5内核 穿山甲广告 浏览器UA IOS内购 陀螺仪 融云IM IDFA广告标识 IMEI/OAID 个推推送 高德定位 微信登录
英文一门打包 | 云打包apk | web 打包成app | 石河子APP开发 | android电商app开发价格 | app2d开发价格 | apple正在开发原型ar眼镜 | app安卓开发教学 | app程序定制开发金华 | app定制app定制开发外包服务商7 | app定制开发哪里找嘉兴 | app防止录屏开发的软件 | app分析要与开发者共享吗 | app合伙开发 | app混合开发框架 | app即时通信 开发 | app接口开发面试题 | app开发 h5
友情链接： APP开发 APP开发社区 安卓上架 APP打包 APP生成 APP封装 webclip驿站APP discuz做APP 苹果APP上架 wordpress app低价ssl
©2015-2021 成都七扇门科技有限公司 yimenapp.com  川公网安备 51019002001185号 蜀ICP备17005078号-4