视频模块
This commit is contained in:
parent
2572f8273f
commit
a4311e3f9e
|
|
@ -0,0 +1,199 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<video id="playVideo" class="top-video" :src="url" :picture-in-picture-mode="wxsetPicture"
|
||||||
|
:show-screen-lock-button="lockButton" :show-casting-button="showCasting" autoplay="true"
|
||||||
|
@fullscreenchange="fullscreenchange" @controlstoggle="controlstoggle">
|
||||||
|
|
||||||
|
<cover-view class="video-heizith-menu" @tap.stop="showSpeedOptions"
|
||||||
|
v-show="isShowControl">{{playbackRateItem == '1.0'?'倍数':playbackRateItem+'x'}}</cover-view>
|
||||||
|
<cover-view v-if="showSpeedModal" class="modal" @tap.stop="hideSpeedOptions">
|
||||||
|
<cover-view class="modal-content" @click.stop>
|
||||||
|
<cover-view class="modal-content-txt">
|
||||||
|
倍数
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="speed-option" v-for="(items,indexs) in playbackRateList" :key="indexs"
|
||||||
|
@tap.stop="changeSpeed" :data-rate="items" :class="{ active: items == playbackRateItem }">
|
||||||
|
{{ items }}X
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
|
||||||
|
</video>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
showCasting: { // 是否显示投屏按钮
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
lockButton: { // 是否显示锁屏按钮
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
isSpeed: { // 是否打开倍速功能
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
url: { // 视频路径
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
wxsetPicture: [
|
||||||
|
'push',
|
||||||
|
'pop'
|
||||||
|
],
|
||||||
|
// 是否显示视频控件
|
||||||
|
isShowControl: false,
|
||||||
|
// 倍速播放
|
||||||
|
playbackRateItem: '1.0',
|
||||||
|
// 倍速设置选项列表
|
||||||
|
playbackRateList: ['0.5', '0.8', '1.0', '1.25', '1.5', '2.0'],
|
||||||
|
showSpeedModal: false,
|
||||||
|
videoCtx: null,
|
||||||
|
fullScreen: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 唤起倍速操作
|
||||||
|
showSpeedOptions() {
|
||||||
|
this.showSpeedModal = true;
|
||||||
|
},
|
||||||
|
// 隐藏倍速操作
|
||||||
|
hideSpeedOptions() {
|
||||||
|
this.showSpeedModal = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 倍速切换
|
||||||
|
changeSpeed(e) {
|
||||||
|
this.playbackRateItem = e.currentTarget.dataset.rate;
|
||||||
|
let rate = Number(this.playbackRateItem);
|
||||||
|
this.videoCtx = uni.createVideoContext('playVideo', this);
|
||||||
|
this.videoCtx.playbackRate(rate);
|
||||||
|
this.hideSpeedOptions();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 是否显示控件
|
||||||
|
controlstoggle(e) {
|
||||||
|
if (!e.detail.show) {
|
||||||
|
this.isShowControl = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.isShowControl = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 全屏操作
|
||||||
|
fullscreenchange(e) {
|
||||||
|
let that = this;
|
||||||
|
that.fullScreen = e.detail.fullScreen;
|
||||||
|
if (that.fullScreen) {
|
||||||
|
wx.setPageOrientation({
|
||||||
|
orientation: 'landscape'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
wx.setPageOrientation({
|
||||||
|
orientation: 'portrait'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
uni.showToast({
|
||||||
|
title: that.fullScreen ? '开启全屏' : '关闭全屏',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
width: 750rpx;
|
||||||
|
height: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-video {
|
||||||
|
width: 100%;
|
||||||
|
height: 422rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-heizith-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
|
bottom: 20%;
|
||||||
|
z-index: 998;
|
||||||
|
font-size: 20rpx;
|
||||||
|
width: 52rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 38rpx;
|
||||||
|
border: 1rpx solid #c9cccc;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #c9cccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
position: absolute;
|
||||||
|
left: 46rpx;
|
||||||
|
bottom: 20%;
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content-txt {
|
||||||
|
text-align: left;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-option {
|
||||||
|
float: left;
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 68rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-option.active {
|
||||||
|
/* border-bottom: 2rpx solid #fd750b; */
|
||||||
|
color: #fd750b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -15,7 +15,9 @@
|
||||||
"autoclose" : true,
|
"autoclose" : true,
|
||||||
"delay" : 0
|
"delay" : 0
|
||||||
},
|
},
|
||||||
"modules" : {},
|
"modules" : {
|
||||||
|
"VideoPlayer" : {}
|
||||||
|
},
|
||||||
"distribute" : {
|
"distribute" : {
|
||||||
"android" : {
|
"android" : {
|
||||||
"permissions" : [
|
"permissions" : [
|
||||||
|
|
|
||||||
|
|
@ -139,6 +139,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{ // 新鲜事
|
||||||
|
"path": "pages/news/course",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "课程",
|
||||||
|
"app-plus": {
|
||||||
|
"bounce": "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{ // 新鲜事/话题/分类
|
{ // 新鲜事/话题/分类
|
||||||
"path": "pages/news/news-topic-cate",
|
"path": "pages/news/news-topic-cate",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
||||||
|
|
@ -152,6 +152,8 @@
|
||||||
},
|
},
|
||||||
// 进入详情页
|
// 进入详情页
|
||||||
goDetail() {
|
goDetail() {
|
||||||
|
this.$u.route('pages/news/course')
|
||||||
|
return
|
||||||
if (this.isDetail) return // 详情页，不跳转
|
if (this.isDetail) return // 详情页，不跳转
|
||||||
this.$u.route('pages/home/detail', {
|
this.$u.route('pages/home/detail', {
|
||||||
data: JSON.stringify({
|
data: JSON.stringify({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
<template>
|
||||||
|
<view class="content" >
|
||||||
|
<zxVideo :url="urls" :isSpeed="isSpeed" :showCasting="showCasting" :lockButton="lockButton"></zxVideo>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import zxVideo from '@/components/zx-video/zx-video.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
zxVideo
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
urls:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
|
||||||
|
//是否打开倍速功能
|
||||||
|
isSpeed:true,
|
||||||
|
//是否显示投屏按钮
|
||||||
|
showCasting:true,
|
||||||
|
//是否显示锁屏按钮
|
||||||
|
lockButton:true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(option) {
|
||||||
|
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
width: 750rpx;
|
||||||
|
height: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
.top-video {
|
||||||
|
width: 100%;
|
||||||
|
height: 422rpx;
|
||||||
|
}
|
||||||
|
.mvdetail {
|
||||||
|
width: 100%;
|
||||||
|
padding: 50rpx 40rpx 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
}
|
||||||
|
.mvdetail-name {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: left;
|
||||||
|
color: #333;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.mvdetail-tag {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: left;
|
||||||
|
color: #6cb5ff;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.mvdetail-tag-item {
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.mvdetail-desc {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: left;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
.mvdetail-btn {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.share-item {
|
||||||
|
width: 134rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
border: 2rpx solid #d2d2d2;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 0 18rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.share-item-img {
|
||||||
|
float: left;
|
||||||
|
width: 26rpx;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
.share-item-title {
|
||||||
|
float: left;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 10rpx 0 0 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-heizith-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
|
bottom: 20%;
|
||||||
|
z-index: 998;
|
||||||
|
font-size: 20rpx;
|
||||||
|
width: 52rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 38rpx;
|
||||||
|
border: 1rpx solid #fff;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
position: absolute;
|
||||||
|
left: 46rpx;
|
||||||
|
bottom: 20%;
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
}
|
||||||
|
.modal-content-txt {
|
||||||
|
text-align: left;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-option {
|
||||||
|
float: left;
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 68rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 4rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.speed-option.active {
|
||||||
|
/* border-bottom: 2rpx solid #fd750b; */
|
||||||
|
color: #fd750b;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue