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:
始于初见
2024-07-19 13:07:09 +08:00
parent 017f704905
commit 3c9ae3589a
19 changed files with 332 additions and 118067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/component/commonComponents/video/index.vue
View File

@@ -890,33 +890,33 @@ export default {
if (this.videoData.type == 1) {
// if(this.$platform=='ios'){
//标准加密
playerOptions = {
// playerOptions = {
...playerOptions,
source: this.videoData.m3u8Url,
// ...playerOptions,
// source: this.videoData.m3u8Url,
// "playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
format:'m3u8',
// // "encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
// "playConfig": {
// "EncryptType": 'HLSEncryption',
// "MtsHlsUriToken": this.videoData.mtsHlsUriToken,
// ...playerOptions,
// source: this.videoData.m3u8Url,
// // ...playerOptions,
// // source: this.videoData.m3u8Url,
// // "playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
// format:'m3u8',
// // // "encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
// // "playConfig": {
// // "EncryptType": 'HLSEncryption',
// // "MtsHlsUriToken": this.videoData.mtsHlsUriToken,
// },
// // },
}
// }else{
// //私有加密
// playerOptions = {
// ...playerOptions,
// "playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
//私有加密
playerOptions = {
...playerOptions,
"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
// "encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
// "playConfig": {
// "EncryptType": 'AliyunVoDEncryption'
// },
"encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
},
// }
// }

254
pages/component/commonComponents/video/ios.nvue
View File

@@ -1,7 +1,86 @@
<template>
<view class="container" style="background-color: #fff; position: relative">
<!-- <web-view style="height: 200px" src="https://www.tmrjournals.com/aliplayer.html"></web-view> -->
<web-view v-if="isSetFirstTime" style="height: 200px;" src="../../../../static/html/aliplayer.html"></web-view>
<view class="container" style="background-color: #000; position: relative">
<view style="width: 100%; height: 200px">
<video
style="width: 100%; height: 100%"
id="video1"
class="video"
:src="videoData.m3u8Url"
autoplay="true"
duration=""
enable-danmu="true"
:loop="true"
initial-time=""
direction="-90"
show-mute-btn="true"
@play="onstart"
@pause="onpause"
@ended="onfinish"
@error="onfail"
@waiting="waiting"
@timeupdate="timeupdate"
@fullscreenchange="fullscreenchange"
>
<!-- <cover-view
class="video-view"
:style="{ width: '100%', height: '100%' }"
>
<view>倍速</view>
</cover-view> -->
</video>
<!-- <div
class=""
style="background-color: #000"
ref="videoContent"
@tap="renderScript.handleClick"
id="url-player-test"
:videoData="videoData"
:winWidth="winWidth"
:winHeight="winHeight"
:currentVideoList="currentVideoList"
:firstTime="firstTime"
:isfresh="isfresh"
:platform="platform"
:isSetFirstTime="isSetFirstTime"
:isChange="isChange"
:change:videoData="renderScript.receiveMsg"
:change:winWidth="renderScript.receiveWinWidth"
:change:winHeight="renderScript.receiveWinHeight"
:change:firstTime="renderScript.receiveFirstTime"
:change:isSetFirstTime="renderScript.receiveisSetFirstTime"
:change:isfresh="renderScript.receiveIsfresh"
:change:platform="renderScript.receiveplatform"
:change:isChange="renderScript.receiveIsChange"
:change:currentVideoList="renderScript.receiveVideoList"
></div>
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
直接调用renderjs中的emitData的方法,传递当前播放时长
</div>
<div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
监听结束方法，记录播放时长
</div>
<div
@tap="renderScript.changeVideoData"
ref="videoContent3"
v-show="false"
>
监听切换视频方法
</div>
<div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
监听切换视频方法
</div>
<div class="fullScreenButton-container">
<div
:class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
@tap="renderScript.changeVideoScreen"
></div>
</div> -->
</view>
</view>
</template>
<script>
@@ -14,10 +93,8 @@ export default {
props: ["currentVideo", "currentVideoList"],
data() {
return {
wv: null, // 定义(app)webview对象节点
webV: {}, // 定义(H5)webview对象节点
sendData: [], // 发送数据数组
platform: null,
isShowVideoview: false,
//当前是否是全屏模式
isFullScreen: false,
isfresh: false,
@@ -35,6 +112,8 @@ export default {
isSetFirstTime: false,
screenType: null,
videoUrl: null,
videoTimer: null,
curTime: null,
};
},
computed: {
@@ -46,6 +125,17 @@ export default {
immediate: true,
handler(newRoute) {},
},
curTime: {
immediate: true,
handler(newRoute) {
if (this.curTime) {
console.log('this.curTime at line 131:', this.curTime)
this.recordTime({
time: this.curTime,
});
}
},
},
timer(newValue) {
this.$emit("child-event", newValue);
},
@@ -53,15 +143,17 @@ export default {
// //页面显示
mounted() {},
beforeDestroy() {
async beforeDestroy() {
this.handleEnd();
console.log("是否走啦习销毁");
clearInterval(this.$store.state.videoTimer);
// this.timer = null;
clearInterval(this.videoTimer);
this.videoTimer = null;
// store.commit("setLoadingShow", null);
plus.screen.lockOrientation("portrait-primary");
console.log("是否走啦习销毁定时器", this.timer);
await this.setVideoTime();
},
async onUnload() {
uni.navigateTo({
@@ -73,7 +165,6 @@ export default {
// plus.screen.lockOrientation("portrait-primary");
// #endif
await this.setVideoTime();
// this.player.dispose();
},
@@ -81,27 +172,64 @@ export default {
onLoad(options) {},
methods: {
handleMessage(evt) {
console.log(evt);
console.log(
"接收Html发送过来的消息：" + JSON.stringify(evt.detail.data[0])
);
onstart(e) {
console.log("onstart:" + JSON.stringify(e));
},
// webview向外部发送消息
handlePostMessage: function (data) {
console.log("接收到消息：" + JSON.stringify(data.detail));
onpause(e) {
console.log("onpause:" + JSON.stringify(e));
},
// 调用 webview 内部逻辑
evalJs() {
this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
onfinish(e) {
this.handleEnd();
console.log("onfinish:" + JSON.stringify(e));
},
start() {
// var playerView = this.$refs.playerView;
this.$refs.playerView.start();
onfail(e) {
console.log("onfail:" + JSON.stringify(e));
},
fullscreenchange(e) {
console.log("fullscreenchange:" + JSON.stringify(e));
},
waiting(e) {
console.log("waiting:" + JSON.stringify(e));
},
timeupdate(e) {
console.log("timeupdate:" + JSON.stringify(e));
this.videoTimer = null;
this.videoTimer = setInterval(() => {
var that = this;
that.curTime = parseInt(e.detail.currentTime);
// that.curStatus = this.player.getStatus()
}, 1000);
this.currentTime = parseInt(e.detail.currentTime);
},
play() {
this.context.play();
},
pause() {
// var playerView = ;
this.$refs.playerView.pause();
this.context.pause();
},
seek() {
this.context.seek(20);
},
stop() {
this.context.stop();
},
fullScreen() {
this.context.requestFullScreen({
direction: 90,
});
},
exitFullScreen() {
this.context.exitFullScreen();
},
sendDanmu() {
this.context.sendDanmu({
text: "要显示的弹幕文本",
color: "#FF0000",
});
},
playbackRate() {
this.context.playbackRate(2);
},
changeVideoData() {
this.isChange = false;
@@ -149,39 +277,6 @@ export default {
time: this.playTime,
});
},
handlePostMessage(res) {
this.$nextTick(() => {
this.$refs.webview.handleMessage();
});
},
getMessage(e) {
uni.showModal({
content: JSON.stringify(e.detail),
showCancel: false,
});
},
initWebView() {
let wv = plus.webview.create(
"/static/html/aliplayer.html?", //date保证不走缓存
"batch_view",
{
// top: "0",
// left: "0",
height: "200px",
width: "100%",
},
{
data: {
videoData:this.videoData,
data:this.videoData.type,
firstTime:this.firstTime,
},
}
); //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
let currentWebview = this.$mp.page.$getAppWebview();
currentWebview.append(wv); //重要，否则会失效
},
async init(data, isChange) {
this.platform = this.$platform;
this.isfresh = true;
@@ -194,12 +289,9 @@ export default {
this.videoId = this.options.video;
console.log("这是苹果视屏id", this.videoId);
await this.getLive(isChange);
// await this.getVideo(isChange);
// this.$emit("child-event", this.timer);
},
async getData(data, isChange) {
var that = this;
if (!this.isSetFirstTime) {
var netWork = data.userCourseVideoPositionEntity
? data.userCourseVideoPositionEntity.position
@@ -240,18 +332,22 @@ export default {
// await this.playVideo();
// }
console.log(this.firstTime, "这是第一次播放时长");
this.isSetFirstTime = true;
await this.initVideo();
}
this.isSetFirstTime = true;
await this.initWebView();
},
async playVideo(e) {
this.videoContext = uni.createVideoContext("videoId", this);
this.videoContext.seek(this.firstTime);
// this.videoContext.requestFullScreen();
initVideo() {
this.context = uni.createVideoContext("video1", this);
if (this.isSetFirstTime) {
setTimeout((res) => {
this.context.seek(this.firstTime);
this.setVideoFirtsetTime();
}, 100);
}
},
recordTime(data) {
this.currentTime = data.time;
@@ -300,7 +396,7 @@ export default {
};
if (this.currentVideo.type == 1) {
var playAuth = res.video.playAuth.replace(/=/g, "");
console.log("这是接口获取的视屏凭证111", playAuth);
console.log("这是接口获取的视屏凭证111", res.video);
data = {
...data,
videoId: res.video.video,
@@ -435,7 +531,7 @@ export default {
curTime(val) {
if (this.curTime !== null && this.curStatus !== null) {
this.$refs.videoContent1.click()
this.re
}
}
},
@@ -651,7 +747,6 @@ export default {
var playerOptions = {
id: "url-player-test",
preload: false,
"vid": this.videoData
.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
@@ -793,14 +888,9 @@ export default {
this.player = player;
console.log('是否拿到第一次初始值呢',this.platform, typeof this.firstTime, this.firstTime)
if(this.platform == 'ios'){
this.player.one('timeupdate', () => {
this.player.seek(this.firstTime);
})
player.on('canplay',function(){
console.log('这是ios数据缓冲初次设置播放位置判断！！！！')
this.player.seek(this.firstTime);
this.player.seek(20);
})
// var seeked = false;
// player.on('loadedmetadata',function (e) {
@@ -1266,4 +1356,12 @@ cover-image {
bottom: 0;
right: 0;
}
.video-view {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
</style>

256
pages/component/commonComponents/video/ios1.nvue → pages/component/commonComponents/video/ios2222.nvue
View File

@@ -1,86 +1,7 @@
<template>
<view class="container" style="background-color: #000; position: relative">
<view style="width: 100%; height: 200px">
<!-- :danmu-list="list" danmu-btn="true"-->
<video
style="width: 100%; height: 100%"
id="video1"
class="video"
:src="videoData.videoUrl"
autoplay="true"
duration=""
enable-danmu="true"
:loop="true"
initial-time=""
direction="-90"
show-mute-btn="true"
@play="onstart"
@pause="onpause"
@ended="onfinish"
@error="onfail"
@waiting="waiting"
@timeupdate="timeupdate"
@fullscreenchange="fullscreenchange"
>
<!-- <cover-view
class="video-view"
:style="{ width: '100%', height: '100%' }"
>
<view>倍速</view>
</cover-view> -->
</video>
<!-- <div
class=""
style="background-color: #000"
ref="videoContent"
@tap="renderScript.handleClick"
id="url-player-test"
:videoData="videoData"
:winWidth="winWidth"
:winHeight="winHeight"
:currentVideoList="currentVideoList"
:firstTime="firstTime"
:isfresh="isfresh"
:platform="platform"
:isSetFirstTime="isSetFirstTime"
:isChange="isChange"
:change:videoData="renderScript.receiveMsg"
:change:winWidth="renderScript.receiveWinWidth"
:change:winHeight="renderScript.receiveWinHeight"
:change:firstTime="renderScript.receiveFirstTime"
:change:isSetFirstTime="renderScript.receiveisSetFirstTime"
:change:isfresh="renderScript.receiveIsfresh"
:change:platform="renderScript.receiveplatform"
:change:isChange="renderScript.receiveIsChange"
:change:currentVideoList="renderScript.receiveVideoList"
></div>
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
直接调用renderjs中的emitData的方法,传递当前播放时长
</div>
<div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
监听结束方法，记录播放时长
</div>
<div
@tap="renderScript.changeVideoData"
ref="videoContent3"
v-show="false"
>
监听切换视频方法
</div>
<div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
监听切换视频方法
</div>
<div class="fullScreenButton-container">
<div
:class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
@tap="renderScript.changeVideoScreen"
></div>
</div> -->
</view>
<view class="container" style="background-color: #fff; position: relative">
<!-- <web-view style="height: 200px" src="https://www.tmrjournals.com/aliplayer.html"></web-view> -->
<web-view v-if="isSetFirstTime" style="height: 200px;" src="../../../../static/html/aliplayer.html"></web-view>
</view>
</template>
<script>
@@ -93,8 +14,10 @@ export default {
props: ["currentVideo", "currentVideoList"],
data() {
return {
wv: null, // 定义(app)webview对象节点
webV: {}, // 定义(H5)webview对象节点
sendData: [], // 发送数据数组
platform: null,
isShowVideoview: false,
//当前是否是全屏模式
isFullScreen: false,
isfresh: false,
@@ -112,8 +35,6 @@ export default {
isSetFirstTime: false,
screenType: null,
videoUrl: null,
videoTimer: null,
curTime: null,
};
},
computed: {
@@ -125,17 +46,6 @@ export default {
immediate: true,
handler(newRoute) {},
},
curTime: {
immediate: true,
handler(newRoute) {
if (this.curTime) {
console.log('this.curTime at line 131:', this.curTime)
this.recordTime({
time: this.curTime,
});
}
},
},
timer(newValue) {
this.$emit("child-event", newValue);
},
@@ -143,17 +53,15 @@ export default {
// //页面显示
mounted() {},
async beforeDestroy() {
beforeDestroy() {
this.handleEnd();
console.log("是否走啦习销毁");
clearInterval(this.$store.state.videoTimer);
clearInterval(this.videoTimer);
this.videoTimer = null;
// this.timer = null;
// store.commit("setLoadingShow", null);
plus.screen.lockOrientation("portrait-primary");
console.log("是否走啦习销毁定时器", this.timer);
await this.setVideoTime();
},
async onUnload() {
uni.navigateTo({
@@ -165,6 +73,7 @@ export default {
// plus.screen.lockOrientation("portrait-primary");
// #endif
await this.setVideoTime();
// this.player.dispose();
},
@@ -172,64 +81,27 @@ export default {
onLoad(options) {},
methods: {
onstart(e) {
console.log("onstart:" + JSON.stringify(e));
handleMessage(evt) {
console.log(evt);
console.log(
"接收Html发送过来的消息：" + JSON.stringify(evt.detail.data[0])
);
},
onpause(e) {
console.log("onpause:" + JSON.stringify(e));
// webview向外部发送消息
handlePostMessage: function (data) {
console.log("接收到消息：" + JSON.stringify(data.detail));
},
onfinish(e) {
this.handleEnd();
console.log("onfinish:" + JSON.stringify(e));
// 调用 webview 内部逻辑
evalJs() {
this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
},
onfail(e) {
console.log("onfail:" + JSON.stringify(e));
},
fullscreenchange(e) {
console.log("fullscreenchange:" + JSON.stringify(e));
},
waiting(e) {
console.log("waiting:" + JSON.stringify(e));
},
timeupdate(e) {
console.log("timeupdate:" + JSON.stringify(e));
this.videoTimer = null;
this.videoTimer = setInterval(() => {
var that = this;
that.curTime = parseInt(e.detail.currentTime);
// that.curStatus = this.player.getStatus()
}, 1000);
this.currentTime = parseInt(e.detail.currentTime);
},
play() {
this.context.play();
start() {
// var playerView = this.$refs.playerView;
this.$refs.playerView.start();
},
pause() {
this.context.pause();
},
seek() {
this.context.seek(20);
},
stop() {
this.context.stop();
},
fullScreen() {
this.context.requestFullScreen({
direction: 90,
});
},
exitFullScreen() {
this.context.exitFullScreen();
},
sendDanmu() {
this.context.sendDanmu({
text: "要显示的弹幕文本",
color: "#FF0000",
});
},
playbackRate() {
this.context.playbackRate(2);
// var playerView = ;
this.$refs.playerView.pause();
},
changeVideoData() {
this.isChange = false;
@@ -277,6 +149,39 @@ export default {
time: this.playTime,
});
},
handlePostMessage(res) {
this.$nextTick(() => {
this.$refs.webview.handleMessage();
});
},
getMessage(e) {
uni.showModal({
content: JSON.stringify(e.detail),
showCancel: false,
});
},
initWebView() {
let wv = plus.webview.create(
"/static/html/aliplayer.html?", //date保证不走缓存
"batch_view",
{
// top: "0",
// left: "0",
height: "200px",
width: "100%",
},
{
data: {
videoData:this.videoData,
data:this.videoData.type,
firstTime:this.firstTime,
},
}
); //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
let currentWebview = this.$mp.page.$getAppWebview();
currentWebview.append(wv); //重要，否则会失效
},
async init(data, isChange) {
this.platform = this.$platform;
this.isfresh = true;
@@ -289,9 +194,12 @@ export default {
this.videoId = this.options.video;
console.log("这是苹果视屏id", this.videoId);
await this.getLive(isChange);
// await this.getVideo(isChange);
// this.$emit("child-event", this.timer);
},
async getData(data, isChange) {
var that = this;
if (!this.isSetFirstTime) {
var netWork = data.userCourseVideoPositionEntity
? data.userCourseVideoPositionEntity.position
@@ -332,22 +240,18 @@ export default {
// await this.playVideo();
// }
console.log(this.firstTime, "这是第一次播放时长");
this.isSetFirstTime = true;
await this.initVideo();
}
},
initVideo() {
this.context = uni.createVideoContext("video1", this);
if (this.isSetFirstTime) {
setTimeout((res) => {
this.context.seek(this.firstTime);
this.setVideoFirtsetTime();
}, 100);
}
},
this.isSetFirstTime = true;
await this.initWebView();
},
async playVideo(e) {
this.videoContext = uni.createVideoContext("videoId", this);
this.videoContext.seek(this.firstTime);
// this.videoContext.requestFullScreen();
},
recordTime(data) {
this.currentTime = data.time;
@@ -396,7 +300,7 @@ export default {
};
if (this.currentVideo.type == 1) {
var playAuth = res.video.playAuth.replace(/=/g, "");
console.log("这是接口获取的视屏凭证111", res.video);
console.log("这是接口获取的视屏凭证111", playAuth);
data = {
...data,
videoId: res.video.video,
@@ -531,7 +435,7 @@ export default {
curTime(val) {
if (this.curTime !== null && this.curStatus !== null) {
this.re
this.$refs.videoContent1.click()
}
}
},
@@ -747,6 +651,7 @@ export default {
var playerOptions = {
id: "url-player-test",
preload: false,
"vid": this.videoData
.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
@@ -888,9 +793,14 @@ export default {
this.player = player;
console.log('是否拿到第一次初始值呢',this.platform, typeof this.firstTime, this.firstTime)
if(this.platform == 'ios'){
this.player.one('timeupdate', () => {
this.player.seek(this.firstTime);
})
player.on('canplay',function(){
console.log('这是ios数据缓冲初次设置播放位置判断！！！！')
this.player.seek(20);
this.player.seek(this.firstTime);
})
// var seeked = false;
// player.on('loadedmetadata',function (e) {
@@ -1356,12 +1266,4 @@ cover-image {
bottom: 0;
right: 0;
}
.video-view {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
</style>