zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ios

Browse Source
This commit is contained in:
始于初见
2024-07-17 15:55:56 +08:00
parent f2efa694cf
commit 14a6e6e458
2 changed files with 377 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

379
static/html/aliplayer.html
View File

@@ -7,6 +7,8 @@
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<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://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
@@ -33,7 +35,7 @@
<body>
<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>
@@ -49,9 +51,9 @@
});
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
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端)');
app.dataList = JSON.parse(e.data.data).navigation
console.log(app.dataList, '+++++++++');
setTimeout(()=>{
app.initAliplayer();
})
}, false)
@@ -87,6 +92,374 @@
},
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;
},
}
})