ios
This commit is contained in:
@@ -173,6 +173,7 @@ export default {
|
|||||||
{
|
{
|
||||||
data: {
|
data: {
|
||||||
videoData:this.videoData,
|
videoData:this.videoData,
|
||||||
|
firstTime:this.firstTime,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
); //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
|
); //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
|
||||||
|
|||||||
@@ -7,6 +7,8 @@
|
|||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
|
content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
|
||||||
<title>Aliplayer Online Settings</title>
|
<title>Aliplayer Online Settings</title>
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
|
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
|
||||||
@@ -33,7 +35,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="prism-player" id="player-con" style="width: 100%;height: 200px;"></div>
|
<div class="url-player-test" id="player-con" style="width: 100%;height: 200px;"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -49,9 +51,9 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
|
const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
|
||||||
console.log('这是app传参数进来的', JSON.stringify(data), 'videoData')
|
console.log('这是app传参数进来的', JSON.stringify(data), 'videoData')
|
||||||
app.videoData = data.videoData
|
app.videoData = data.videoData
|
||||||
console.log('这是app传参数进来的1111', JSON.stringify(app.videoData), 'videoData')
|
console.log('这是app传参数进来的1111', JSON.stringify(app.videoData), 'videoData')
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -60,6 +62,9 @@
|
|||||||
console.log(e, 'HTML 接受APP发送过来的消息 (H5端)');
|
console.log(e, 'HTML 接受APP发送过来的消息 (H5端)');
|
||||||
app.dataList = JSON.parse(e.data.data).navigation
|
app.dataList = JSON.parse(e.data.data).navigation
|
||||||
console.log(app.dataList, '+++++++++');
|
console.log(app.dataList, '+++++++++');
|
||||||
|
setTimeout(()=>{
|
||||||
|
app.initAliplayer();
|
||||||
|
})
|
||||||
}, false)
|
}, false)
|
||||||
|
|
||||||
|
|
||||||
@@ -87,6 +92,374 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
initAliplayer() {
|
||||||
|
|
||||||
|
const _this = this;
|
||||||
|
// scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
|
||||||
|
// if (
|
||||||
|
// _this.scriptTagStatus === 2 &&
|
||||||
|
// (_this.instance === null || _this.reloadPlayer)
|
||||||
|
// ) {
|
||||||
|
// _this.instance && _this.instance.dispose();
|
||||||
|
|
||||||
|
// document.querySelector("#" + _this.playerId).innerHTML = "";
|
||||||
|
|
||||||
|
// Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
|
||||||
|
// 所以，我们只能在 nextTick 里面初始化 Aliplayer
|
||||||
|
_this.$nextTick(() => {
|
||||||
|
console.log('这是这只只是666666:', this.firstTime, this.videoData)
|
||||||
|
|
||||||
|
|
||||||
|
var playerOptions = {
|
||||||
|
id: "url-player-test",
|
||||||
|
preload: false,
|
||||||
|
"vid": this.videoData
|
||||||
|
.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
|
||||||
|
|
||||||
|
width: '100%', //容器的大小
|
||||||
|
// videoWidth: '100vw', //容器的大小
|
||||||
|
// videoHeight: '100vh', //容器的大小
|
||||||
|
height: '100%', //容器的大小
|
||||||
|
playsinline: true,
|
||||||
|
controlBarVisibility: "click",
|
||||||
|
cover: "",
|
||||||
|
components: [
|
||||||
|
// {
|
||||||
|
// name: 'BulletScreenComponent',
|
||||||
|
// type: AliPlayerComponent.BulletScreenComponent,
|
||||||
|
// /** Descriptions of the scrolling text component parameters: text, style, bulletPosition
|
||||||
|
// * text: The scrolling text
|
||||||
|
// * style: The style of the scrolling text
|
||||||
|
// * bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
|
||||||
|
// */
|
||||||
|
// args: ['http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'adComponent',
|
||||||
|
// type: fullScreenButtonComponent,
|
||||||
|
// args: [
|
||||||
|
// 'http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png'
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: 'RateComponent',
|
||||||
|
type: AliPlayerComponent.RateComponent
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// {
|
||||||
|
// name: 'RotateMirrorComponent',
|
||||||
|
// type: AliPlayerComponent.RotateMirrorComponent
|
||||||
|
// },
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
skinLayout: [{
|
||||||
|
name: "bigPlayButton",
|
||||||
|
align: "blabs",
|
||||||
|
x: 30,
|
||||||
|
y: 80
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "H5Loading",
|
||||||
|
align: "cc"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "errorDisplay",
|
||||||
|
align: "tlabs",
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "infoDisplay"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "tooltip",
|
||||||
|
align: "blabs",
|
||||||
|
x: 0,
|
||||||
|
y: 56
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "thumbnail"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "controlBar",
|
||||||
|
align: "blabs",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
children: [{
|
||||||
|
name: "progress",
|
||||||
|
align: "blabs",
|
||||||
|
x: 0,
|
||||||
|
y: 44
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "playButton",
|
||||||
|
align: "tl",
|
||||||
|
x: 15,
|
||||||
|
y: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "timeDisplay",
|
||||||
|
align: "tl",
|
||||||
|
x: 10,
|
||||||
|
y: 7
|
||||||
|
},
|
||||||
|
// {name: "fullScreenButton", align: "tr", x: 10, y: 12},
|
||||||
|
// {name:"subtitle", align:"tr",x:15, y:12},
|
||||||
|
// {
|
||||||
|
// name: "setting",
|
||||||
|
// align: "tr",
|
||||||
|
// x: 15,
|
||||||
|
// y: 12
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
name: "prism-speed-selector",
|
||||||
|
align: "tr",
|
||||||
|
x: 15,
|
||||||
|
y: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "volume",
|
||||||
|
align: "tr",
|
||||||
|
x: 5,
|
||||||
|
y: 10
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (_this.videoData.type == 1) {
|
||||||
|
playerOptions = {
|
||||||
|
...playerOptions,
|
||||||
|
"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
|
||||||
|
"encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
|
||||||
|
"playConfig": {
|
||||||
|
"EncryptType": 'AliyunVoDEncryption'
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
playerOptions = {
|
||||||
|
...playerOptions,
|
||||||
|
source: this.videoData.videoUrl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_this.instance = window.Aliplayer(playerOptions);
|
||||||
|
|
||||||
|
// 绑定事件，当 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);
|
||||||
|
});
|
||||||
|
let start = true;
|
||||||
|
let startProgress = 0;
|
||||||
|
let endProgress = 0;
|
||||||
|
//禁止拖动进度条
|
||||||
|
_this.instance.on("startSeek", (e) => {
|
||||||
|
if (start) {
|
||||||
|
start = false;
|
||||||
|
startProgress = _this.instance.getCurrentTime();
|
||||||
|
}
|
||||||
|
_this.instance.pause();
|
||||||
|
// this.$emit("startSeek", _this.instance);
|
||||||
|
});
|
||||||
|
|
||||||
|
//禁止拖动进度条
|
||||||
|
_this.instance.on("completeSeek", () => {
|
||||||
|
start = true;
|
||||||
|
endProgress = _this.instance.getCurrentTime();
|
||||||
|
if (endProgress < startProgress) {
|
||||||
|
_this.instance.seek(endProgress);
|
||||||
|
} else {
|
||||||
|
_this.instance.seek(startProgress);
|
||||||
|
}
|
||||||
|
_this.instance.play();
|
||||||
|
// 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);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
*目前只支持H5播放器。
|
||||||
|
暂不支持不同格式视频间的之间切换。
|
||||||
|
暂不支持直播rtmp流切换。
|
||||||
|
*/
|
||||||
|
replayByVidAndPlayAuth: function (vid, accId, accSecret, stsToken, authInfo, domainRegion) {
|
||||||
|
this.instance.replayByVidAndPlayAuth(vid, accId, accSecret, stsToken, authInfo, domainRegion);
|
||||||
|
},
|
||||||
|
|
||||||
|
/***
|
||||||
|
* 重新设置vid和权限，目前只支持H5播放器。
|
||||||
|
暂不支持不同格式视频间的之间切换。
|
||||||
|
暂不支持直播rtmp流切换。
|
||||||
|
* @param vid 视频ID
|
||||||
|
* @param playauth 播放权限
|
||||||
|
*/
|
||||||
|
replayByVidAndAuthInfo: function (vid, playauth) {
|
||||||
|
this.instance.replayByVidAndAuthInfo(vid, playauth);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 目前只支持HTML5界面上的重载功能,暂不支持直播rtmp流切换m3u8）之间切换,暂不支持直播rtmp流切换
|
||||||
|
*@argument vid 视频id
|
||||||
|
*@argument playauth 播放凭证
|
||||||
|
*/
|
||||||
|
reloaduserPlayInfoAndVidRequestMts: function (vid, playauth) {
|
||||||
|
this.instance.reloaduserPlayInfoAndVidRequestMts(vid, playauth);
|
||||||
|
},
|
||||||
|
|
||||||
|
/***
|
||||||
|
*设置截图参数
|
||||||
|
* @param width 宽度
|
||||||
|
* @param height 高度
|
||||||
|
* @param rate 截图质量
|
||||||
|
*/
|
||||||
|
setSanpshotProperties: function (width, height, rate) {
|
||||||
|
this.instance.setSanpshotProperties(width, height, rate);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 设置封面地址
|
||||||
|
* @param cover 封面地址
|
||||||
|
*/
|
||||||
|
setCover: function (cover) {
|
||||||
|
this.instance.setCover(cover);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
reloadPlayer: function () {
|
||||||
|
this.isReload = true;
|
||||||
|
this.initAliplayer();
|
||||||
|
this.isReload = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user