333
This commit is contained in:
@@ -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>
|
||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user