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

2222

Browse Source
This commit is contained in:
guilinlan jin
2024-07-17 17:20:49 +08:00
parent 5e7cfdbec3
commit 1dc5c16c59
6 changed files with 98 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

492
static/html/aliplayer.html
View File

@@ -1,466 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<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>
<script src="./vue.js"></script>
<!-- <script src="./textData.js"></script> -->
<script>
var viewWidth = window.screen.width;
if (viewWidth < 768) {
//document.write('<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">');
} else {
document.write('<style>@media screen and (min-width: 768px) and (max-width: 1199px) {html {zoom: 0.8;}}</style>');
}
</script>
<link rel="stylesheet"
href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.24.1/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8"
src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.24.1/aliplayer-min.js"></script>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<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>
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.24.1/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.24.1/aliplayer-min.js"></script>
</head>
<body>
<div id="app">
<div class="url-player-test" id="player-con" style="width: 100%;height: 200px;"></div>
</div>
</body>
<script type="text/javascript">
// 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function () {
uni.getEnv(function (res) {
console.log('获取当前环境：' + JSON.stringify(res));
});
const data = plus.webview.getWebviewById("batch_view").data;//上传时最后一个参数
console.log('这是app传参数进来的', JSON.stringify(data), 'videoData')
app.videoData = data.videoData
console.log('这是app传参数进来的1111', JSON.stringify(app.videoData), 'videoData')
});
// HTML 接受APP发送过来的消息 (H5端)
window.addEventListener('message', e => {
console.log(e, 'HTML 接受APP发送过来的消息 (H5端)');
app.dataList = JSON.parse(e.data.data).navigation
console.log(app.dataList, '+++++++++');
setTimeout(()=>{
app.initAliplayer();
})
}, false)
// HTML 接受APP发送过来的消息 (APP端)
function requestData(data) {
console.log(JSON.stringify(data), 'HTML 接受APP发送过来的消息 (APP端)');
app.dataList = data.navigation // 赋值
<div class="prism-player" id="player-con"></div>
<script>
var player = new Aliplayer({
"id": "player-con",
"vid": "000d96cd433771efbff25420848c0102",
"accessKeyId": "STS.NTU6wnMWbcmnKAgPE3sxPorh4",
"securityToken": "CAISwgJ1q6Ft5B2yfSjIr5fgfc3aoIhD1K+FSWfWtEVmf/d8gLfD1jz2IHhMdHFuB+4YsP41lWtS7f8alqJvRoRZXkHfdsp36MzCfcpIh9CT1fau5Jko1beDewHKeT+ZsebWZ+LmNqS/Ht6md1HDkAJq3LL+bk/Mdle5MJqP+/EFA8oQUlv6F00kYu1bPQx/ssQXGGLMPPK2SH7Qj3HXEVBjt3gX6wo9y9zmnJXAtUaG1Qalmr5M9tyuGPX+MZkwZqUYesyuwel7epDG1CNt8BVQ/M909vccoWef4I/DXQcLuUTdabGNqscAMgh1fK8+Fr7vNBB7d2X80Aa6tfMUq34lVYk9O0xU1DO2RNwb4Zu2LCA/bJjxDWbj2B5zWvYOS/vdiIPa5dqnghPI55Kh8N31m9ywwdXEh7uyiWz4I9GdhgFoufIdGoABFy8JuV0rtNIdm/XPwIfLCYEtyBppI8M4C1t84QG+hmLu4SL5QzXPI5xzLFYKe+J+BPnNo8Qvc+RuFfU8chJ7in2jk1ixsbVMM1o1OWlYdlf6bmnwo00ljA9x3z2+EeQr9lvCv3s9rXRk4iwoSWQ1njT/GpxOSB9e+dm6TPbT0YggAA==",
"accessKeySecret": "75zxgsbpY3V7MnhuCorHDQTWXqoSYLK682edTGwEsAii",
"region": "cn-shanghai",
"format": "m3u8",
"mediaType": "video",
"encryptType": 1,
"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");
}
var app = new Vue({
el: '#app',
data: {
textTip: "提示信息",
dataList: [],
videoData: {},
},
mounted() {
},
onLoad() {
},
onShow() {
},
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;
},
}
})
</script>
);
</script>
</body>