466 lines
13 KiB
HTML
466 lines
13 KiB
HTML
<!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>
|
||
</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 // 赋值
|
||
}
|
||
|
||
|
||
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> |