This commit is contained in:
2024-07-22 09:51:58 +08:00
parent 54614f2dc5
commit 32ea0b7373
14 changed files with 1532 additions and 1507 deletions

View File

@@ -1,5 +1,6 @@
<template>
<view class="container" style="background-color: #000; position: relative">
<u-modal :show="show" :title="title" :content='content'></u-modal>
<!-- <u-icon
@click="goBack"
name="arrow-left"
@@ -40,6 +41,9 @@
<div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
监听切换视频方法
</div>
<div @tap="renderScript.emitopenShow" ref="videoContent5" v-show="false">
打开视频提示
</div>
<div class="fullScreenButton-container">
<div :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
@tap="renderScript.changeVideoScreen"></div>
@@ -75,6 +79,8 @@
props: ["currentVideo", "currentVideoList"],
data() {
return {
show: false,
content: "此设备暂不支持观看当前视频,请移步到安卓手机进行学习!",
platform: null,
//当前是否是全屏模式
isFullScreen: false,
@@ -166,6 +172,9 @@
},
methods: {
openShow() {
this.show = true;
},
start() {
// var playerView = this.$refs.playerView;
this.$refs.playerView.start();
@@ -175,6 +184,7 @@
this.$refs.playerView.pause();
},
changeVideoData() {
this.show = false;
this.isChange = false;
},
async changeVideo(data) {
@@ -221,6 +231,7 @@
});
},
async init(data, isChange) {
this.show = false;
this.platform = this.$platform;
this.isfresh = true;
console.log("at line 59:", "是否先走init这里", this.platform);
@@ -601,6 +612,9 @@
ownerInstance.callMethod('setVideoFirtsetTime')
},
emitopenShow(event, ownerInstance) {
ownerInstance.callMethod('openShow')
},
changeVideoScreen(event, ownerInstance) {
var that = this;
// this.$emit('changeScreenLoading',true)
@@ -871,39 +885,31 @@
}
if (this.videoData.type == 1) {
// if(this.$platform=='ios'){
//标准加密
// 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,
// // },
// }
// }else{
//私有加密
playerOptions = {
...playerOptions,
"playauth": this.videoData.playAuth, // 必选参数参数值可通过调用GetVideoPlayAuth接口获取。
"encryptType": 1, // 必选参数当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
},
// }
if (this.videoData.m3u8Url == null || this
.videoData.m3u8Url == '') {
//console.log('这是私有加密的视频');
if (this.$platform == 'ios') {
this.$refs.videoContent5.click()
} else {
playerOptions = {
...playerOptions,
"playauth": this.videoData.playAuth, // 必选参数参数值可通过调用GetVideoPlayAuth接口获取。
"encryptType": 1, // 必选参数当播放私有加密流时需要设置本参数值为1。其它情况无需设置
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
}
}
}
} else if (this.videoData.m3u8Url != null || this.videoData.m3u8Url != '') {
playerOptions = {
...playerOptions,
source: this.videoData.m3u8Url,
playConfig: {
"EncryptType": 'HLSEncryption'
}
}
console.log('这是标准加密的视频');
}
@@ -912,6 +918,31 @@
...playerOptions,
source: this.videoData.videoUrl
}
console.log('这是没有加密的视频');
}
if (this.videoData.type == 1 && this.videoData.m3u8Url == null || this.videoData.type == 1 && this
.videoData.m3u8Url == '') {
playerOptions = {
...playerOptions,
"playauth": this.videoData.playAuth, // 必选参数参数值可通过调用GetVideoPlayAuth接口获取。
"encryptType": 1, // 必选参数当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
}
}
console.log('这是私有加密的视频');
} else if (this.videoData.type == 1 && this.videoData.m3u8Url != null && this.videoData.type == 1 && this
.videoData.m3u8Url != '') {
playerOptions = {
...playerOptions,
source: this.videoData.m3u8Url,
playConfig: {
"EncryptType": 'HLSEncryption'
}
}
console.log('这是标准加密的视频');
}
var player = new Aliplayer(playerOptions, function(player) {});
this.player = player;

View File

@@ -1,12 +1,12 @@
<template>
<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.type==1?videoData.m3u8Url:videoData.videoUrl"
:title="videoTitle"
:src="videoData.type == 1 ? videoData.m3u8Url : videoData.videoUrl"
autoplay="true"
duration=""
enable-danmu="true"
@@ -21,18 +21,7 @@
@waiting="waiting"
@timeupdate="timeupdate"
@fullscreenchange="fullscreenchange"
>
<cover-view style="position: absolute;top: 128rpx;right: 60rpx;" @click="doubleSpeed">倍速</cover-view>
<!-- <cover-view
class="video-view"
:style="{ width: '100%', height: '100%' }"
>
<view>倍速</view>
</cover-view> -->
</video>
></video>
<!-- <div
class=""
@@ -93,9 +82,28 @@ import { mapState, mapMutations } from "vuex";
// importScripts('@/static/aliplayer/aliplayer-min.js')
export default {
props: ["currentVideo", "currentVideoList"],
props: ["currentVideo", "currentVideoList", "videoTitle"],
data() {
return {
speedList: [
{
name: "0.5X",
value: 0.5,
},
{
name: "正常",
value: 1,
},
{
name: "1.25X",
value: 1.25,
},
{
name: "1.5X",
value: 1.5,
},
],
isShowSpeed: false,
platform: null,
isShowVideoview: false,
//当前是否是全屏模式
@@ -104,7 +112,7 @@ export default {
isChange: false,
isControl: true,
timer: null,
videoTitle: "",
videoList: [],
firstTime: 0,
options: {},
@@ -132,7 +140,6 @@ export default {
immediate: true,
handler(newRoute) {
if (this.curTime) {
console.log('this.curTime at line 131:', this.curTime)
this.recordTime({
time: this.curTime,
});
@@ -175,6 +182,12 @@ export default {
onLoad(options) {},
methods: {
openSpeed() {
this.isShowSpeed = !this.isShowSpeed;
},
changeSpeed(e) {
console.log("e at line 201:", e);
},
onstart(e) {
console.log("onstart:" + JSON.stringify(e));
},
@@ -195,7 +208,6 @@ export default {
console.log("waiting:" + JSON.stringify(e));
},
timeupdate(e) {
console.log("timeupdate:" + JSON.stringify(e));
this.videoTimer = null;
this.videoTimer = setInterval(() => {
@@ -1368,16 +1380,28 @@ cover-image {
z-index: 999;
}
.speed {
position: absolute;
right: 20rpx;
top: 16rpx;
.doubleSpeed {
color: #fff;
font-size: 14rpx;
background-color: rgba(0, 0, 0, 0.6);
padding: 4rpx 6rpx;
}
}
.cover-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.speed {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 30px;
color: #fff;
/* background-color: red; */
display: flex;
justify-content: center;
align-items: center;
}
</style>