diff --git a/pages/component/commonComponents/video/ios.nvue b/pages/component/commonComponents/video/ios.nvue index 01da3ac..3d4e03c 100644 --- a/pages/component/commonComponents/video/ios.nvue +++ b/pages/component/commonComponents/video/ios.nvue @@ -173,6 +173,7 @@ export default { { data: { videoData:this.videoData, + firstTime:this.firstTime, }, } ); //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象 diff --git a/static/html/aliplayer.html b/static/html/aliplayer.html index 8bea8d7..e1cff57 100644 --- a/static/html/aliplayer.html +++ b/static/html/aliplayer.html @@ -7,6 +7,8 @@ Aliplayer Online Settings + + @@ -33,7 +35,7 @@
-
+
@@ -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; + }, + + } })