视频模块
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,
|
||||
"delay" : 0
|
||||
},
|
||||
"modules" : {},
|
||||
"modules" : {
|
||||
"VideoPlayer" : {}
|
||||
},
|
||||
"distribute" : {
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
|
|
|
|||
|
|
@ -139,6 +139,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
{ // 新鲜事
|
||||
"path": "pages/news/course",
|
||||
"style": {
|
||||
"navigationBarTitleText": "课程",
|
||||
"app-plus": {
|
||||
"bounce": "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{ // 新鲜事/话题/分类
|
||||
"path": "pages/news/news-topic-cate",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -152,6 +152,8 @@
|
|||
},
|
||||
// 进入详情页
|
||||
goDetail() {
|
||||
this.$u.route('pages/news/course')
|
||||
return
|
||||
if (this.isDetail) return // 详情页，不跳转
|
||||
this.$u.route('pages/home/detail', {
|
||||
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