This commit is contained in:
2024-07-19 13:18:25 +08:00
parent 72eb9abf34
commit 77d8c67f64
2 changed files with 1239 additions and 1236 deletions

View File

@@ -16,31 +16,16 @@
<button type="primary" @click="start()">开始</button> <button type="primary" @click="start()">开始</button>
<button type="primary" @click="pause()">暂停</button> --> <button type="primary" @click="pause()">暂停</button> -->
<view style="width: 100%; height: 200px"> <view style="width: 100%; height: 200px">
<div <div class="" style="background-color: #000" ref="videoContent" @tap="renderScript.handleClick"
class="" id="url-player-test" :videoData="videoData" :winWidth="winWidth" :winHeight="winHeight"
style="background-color: #000" :currentVideoList="currentVideoList" :firstTime="firstTime" :isfresh="isfresh" :platform="platform"
ref="videoContent" :isSetFirstTime="isSetFirstTime" :isChange="isChange" :change:videoData="renderScript.receiveMsg"
@tap="renderScript.handleClick" :change:winWidth="renderScript.receiveWinWidth" :change:winHeight="renderScript.receiveWinHeight"
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:firstTime="renderScript.receiveFirstTime"
:change:isSetFirstTime="renderScript.receiveisSetFirstTime" :change:isSetFirstTime="renderScript.receiveisSetFirstTime"
:change:isfresh="renderScript.receiveIsfresh" :change:isfresh="renderScript.receiveIsfresh" :change:platform="renderScript.receiveplatform"
:change:platform="renderScript.receiveplatform"
:change:isChange="renderScript.receiveIsChange" :change:isChange="renderScript.receiveIsChange"
:change:currentVideoList="renderScript.receiveVideoList" :change:currentVideoList="renderScript.receiveVideoList"></div>
></div>
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false"> <div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
直接调用renderjs中的emitData的方法,传递当前播放时长 直接调用renderjs中的emitData的方法,传递当前播放时长
</div> </div>
@@ -49,21 +34,15 @@
监听结束方法记录播放时长 监听结束方法记录播放时长
</div> </div>
<div <div @tap="renderScript.changeVideoData" ref="videoContent3" v-show="false">
@tap="renderScript.changeVideoData"
ref="videoContent3"
v-show="false"
>
监听切换视频方法 监听切换视频方法
</div> </div>
<div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false"> <div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
监听切换视频方法 监听切换视频方法
</div> </div>
<div class="fullScreenButton-container"> <div class="fullScreenButton-container">
<div <div :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
:class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`" @tap="renderScript.changeVideoScreen"></div>
@tap="renderScript.changeVideoScreen"
></div>
</div> </div>
</view> </view>
<!-- <view style="width: 100%; height: 200px; position: relative" v-else> <!-- <view style="width: 100%; height: 200px; position: relative" v-else>
@@ -84,12 +63,15 @@
</view> </view>
</template> </template>
<script> <script>
import store from "@/store/index.js"; import store from "@/store/index.js";
import $http from "@/config/requestConfig.js"; import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex"; import {
mapState,
mapMutations
} from "vuex";
// importScripts('@/static/aliplayer/aliplayer-min.js') // importScripts('@/static/aliplayer/aliplayer-min.js')
export default { export default {
props: ["currentVideo", "currentVideoList"], props: ["currentVideo", "currentVideoList"],
data() { data() {
return { return {
@@ -301,7 +283,10 @@ export default {
} }
}); });
} }
that.$refs.playerView.setPlayerCallBack(({ type, data }) => { that.$refs.playerView.setPlayerCallBack(({
type,
data
}) => {
switch (type) { switch (type) {
case "isFullScreen": case "isFullScreen":
isFullScreen = Boolean(data); isFullScreen = Boolean(data);
@@ -318,9 +303,9 @@ export default {
async getData(data, isChange) { async getData(data, isChange) {
var that = this; var that = this;
if (!this.isSetFirstTime) { if (!this.isSetFirstTime) {
var netWork = data.userCourseVideoPositionEntity var netWork = data.userCourseVideoPositionEntity ?
? data.userCourseVideoPositionEntity.position data.userCourseVideoPositionEntity.position :
: 0; 0;
var list = []; var list = [];
if (uni.getStorageSync("videoOssList")) { if (uni.getStorageSync("videoOssList")) {
list = JSON.parse(uni.getStorageSync("videoOssList")); list = JSON.parse(uni.getStorageSync("videoOssList"));
@@ -507,18 +492,18 @@ export default {
}, },
created() {}, created() {},
}; };
</script> </script>
<script module="renderScript" lang="renderjs"> <script module="renderScript" lang="renderjs">
import $ from 'jquery' import $ from 'jquery'
// import StaticADComponent from './staticadcomponent/index.js'; // import StaticADComponent from './staticadcomponent/index.js';
/** /**
* 静态广告组件 * 静态广告组件
*/ */
export default { export default {
/** /**
* 静态广告组件 * 静态广告组件
*/ */
@@ -1204,10 +1189,10 @@ export default {
// }); // });
} }
} }
} }
</script> </script>
<style> <style>
.container { .container {
width: 100vw; width: 100vw;
height: auto; height: auto;
@@ -1215,66 +1200,66 @@ export default {
width: 60rpx !important; width: 60rpx !important;
height: 60rpx !important; height: 60rpx !important;
} }
} }
.fds { .fds {
background-color: blue; background-color: blue;
height: 600rpx; height: 600rpx;
position: fixed; position: fixed;
top: 60rpx; top: 60rpx;
} }
.returnBack { .returnBack {
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
height: 88rpx; height: 88rpx;
padding-left: 20rpx; padding-left: 20rpx;
} }
.txt { .txt {
color: #fff; color: #fff;
} }
.right_title { .right_title {
background: #000; background: #000;
height: 96rpx; height: 96rpx;
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
} }
.return { .return {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
color: #fff; color: #fff;
} }
.right_handle { .right_handle {
width: 200rpx; width: 200rpx;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
padding-right: 20rpx; padding-right: 20rpx;
} }
cover-view { cover-view {
display: block; display: block;
line-height: 1.2; line-height: 1.2;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
pointer-events: auto; pointer-events: auto;
} }
cover-view { cover-view {
visibility: visible !important; visibility: visible !important;
} }
cover-image { cover-image {
visibility: visible !important; visibility: visible !important;
} }
.fullScreenButton-container { .fullScreenButton-container {
color: #fff; color: #fff;
float: right; float: right;
height: 35px; height: 35px;
@@ -1292,12 +1277,12 @@ cover-image {
margin-top: 7px; margin-top: 7px;
cursor: pointer; cursor: pointer;
& + i { &+i {
margin-left: 3px; margin-left: 3px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
&:hover + .player-tooltip { &:hover+.player-tooltip {
display: block; display: block;
} }
} }
@@ -1316,9 +1301,9 @@ cover-image {
right: -12px; right: -12px;
} }
} }
} }
.playlist-content { .playlist-content {
position: absolute; position: absolute;
right: 0; right: 0;
width: 0px; width: 0px;
@@ -1357,9 +1342,9 @@ cover-image {
} }
} }
} }
} }
.player-tooltip { .player-tooltip {
position: absolute; position: absolute;
display: none; display: none;
font-size: 12px; font-size: 12px;
@@ -1373,9 +1358,9 @@ cover-image {
top: -48px; top: -48px;
padding: 0 5px; padding: 0 5px;
white-space: nowrap; white-space: nowrap;
} }
.playlist-skip-tip { .playlist-skip-tip {
padding: 5px 15px; padding: 5px 15px;
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -1388,9 +1373,9 @@ cover-image {
color: #000; color: #000;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
#rotating-div { #rotating-div {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #3498db; background-color: #3498db;
@@ -1404,5 +1389,5 @@ cover-image {
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
</style> </style>

View File

@@ -22,6 +22,11 @@
@timeupdate="timeupdate" @timeupdate="timeupdate"
@fullscreenchange="fullscreenchange" @fullscreenchange="fullscreenchange"
> >
<cover-view class="speed">
<text class="doubleSpeed">倍速</text>
</cover-view>
<!-- <cover-view <!-- <cover-view
class="video-view" class="video-view"
@@ -1364,4 +1369,17 @@ cover-image {
right: 0; right: 0;
z-index: 999; 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;
}
}
</style> </style>