feat: 更新视频播放器功能并修复多个问题
- 升级edu-core依赖至v1.0.8 - 新增测试页面路由配置 - 修复订单页面Android平台专属支付按钮逻辑 - 优化视频播放器组件,增加倍速播放配置和控件显示逻辑 - 修复iOS平台视频封面显示问题 - 改进全屏模式处理逻辑 - 优化进度条和控制栏交互体验 - 修复DOM元素查找延迟问题 - 移除课程详情页冗余刷新逻辑
This commit is contained in:
148
components/video-player/video-player.vue
Normal file
148
components/video-player/video-player.vue
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<yb-video
|
||||||
|
ref="video" title="测试视频" height="auto"
|
||||||
|
autoplay
|
||||||
|
render-type="renderjs"
|
||||||
|
:crossOrigin="crossOrigin"
|
||||||
|
:src="src"
|
||||||
|
:workIndex="workIndex"
|
||||||
|
:custom="custom"
|
||||||
|
header
|
||||||
|
controls
|
||||||
|
exitDirection="portrait"
|
||||||
|
object-fit="contain"
|
||||||
|
@destroyed="handleDestroyed"
|
||||||
|
@workchange="handleWorkChange"
|
||||||
|
@loadedmetadata="handleLoaded"
|
||||||
|
@timeupdate="handleTimeUpdate"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import YbPlayer from '@/libs/yb-player.js'
|
||||||
|
// import YbVideo from '../yingbing-video/components/yb-video/yb-video.vue'
|
||||||
|
export default {
|
||||||
|
// components: {
|
||||||
|
// YbVideo
|
||||||
|
// },
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
src: '',
|
||||||
|
currentTime: 0,
|
||||||
|
three: '',
|
||||||
|
crossOrigin: '',
|
||||||
|
danmu: [],
|
||||||
|
quality: [],
|
||||||
|
works: [],
|
||||||
|
workIndex: 0,
|
||||||
|
custom: {
|
||||||
|
//自定义插槽
|
||||||
|
slots: [{
|
||||||
|
innerHTML: '<div class="fast-progress-btn" style="left:15%;">-15s</div>',
|
||||||
|
followControls: true,
|
||||||
|
click: () => {
|
||||||
|
this.$refs.video.seek(this.currentTime - 15)
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
innerHTML: '<div class="fast-progress-btn" style="right:15%;">+15s</div>',
|
||||||
|
followControls: true,
|
||||||
|
click: () => {
|
||||||
|
this.$refs.video.seek(this.currentTime + 15)
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
header: {
|
||||||
|
disableMore: true,//关闭展示更多按钮
|
||||||
|
},
|
||||||
|
controls: {
|
||||||
|
disableDanmuSend: true,//关闭弹幕发送按钮
|
||||||
|
disableDanmuVisible: true,//关闭弹幕显示和隐藏按钮
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
rightSlots: []
|
||||||
|
},
|
||||||
|
},
|
||||||
|
text: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed() {
|
||||||
|
this.changeSrc(3)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleTimeUpdate (time) {
|
||||||
|
this.currentTime = time
|
||||||
|
},
|
||||||
|
changeSrc (index) {
|
||||||
|
var arr = [
|
||||||
|
'/static/video/test-360.mp4',//如果网页开启了/h5/的前缀,就需要加上这个/h5/
|
||||||
|
'https://v2-zj-scct.kwaicdn.com/upic/2025/08/14/20/BMjAyNTA4MTQyMDEwMDVfMzc5NDk1NDg1Nl8xNzIzNjYyNjIwNDdfMF8z_b_B92c62e9609ee404af820675b37447d6d.mp4?tag=1-1756166590-unknown-0-wo6mf8iejp-e4f1ab14369cda6a&provider=self&clientCacheKey=3x4mikyhc8uu4jk_b.mp4&di=b6859a4d&bp=14944&x-ks-ptid=172366262047&kwai-not-alloc=self-cdn&kcdntag=p:Sichuan;i:ChinaTelecom;ft:UNKNOWN;h:COLD;pn:kuaishouVideoProjection&Aecs=172.19.0.226&ocid=100000971&tt=b&ss=vps',
|
||||||
|
'https://files2.changyou.com/vc/dj/2023/1115/loop2.ts',
|
||||||
|
'https://ydtnt-jw.oss-cn-zhangjiakou.aliyuncs.com/jw-video/%E8%A7%86%E9%A2%91/%E8%8B%B1%E8%AF%AD/%E5%94%90%E8%BF%9F%E8%AF%8D%E6%B1%87%E7%9A%84%E9%80%BB%E8%BE%91%E5%8D%95%E8%AF%8D%E8%AF%BE/Unit1-1_batch.mp4'
|
||||||
|
]
|
||||||
|
this.quality = []
|
||||||
|
for ( let i = 0 ; i < 3; i++ ) {
|
||||||
|
this.quality.push({
|
||||||
|
title: i == 0 ? '480p' : i == 1 ? '720p' : '1080p',
|
||||||
|
src: arr[index],
|
||||||
|
type: 'video'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.works = []
|
||||||
|
for ( let i = 0 ; i < 10; i++ ) {
|
||||||
|
this.works.push({
|
||||||
|
title: '第' + (i + 1) + '集',
|
||||||
|
src: arr[index]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.workIndex = 0
|
||||||
|
this.three = index == 0 ? '360' : 'none'
|
||||||
|
this.crossOrigin = index == 0 ? 'anonymous' : ''
|
||||||
|
this.src = arr[index]
|
||||||
|
},
|
||||||
|
handleDestroyed () {
|
||||||
|
uni.showToast({
|
||||||
|
title: '视频已销毁',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
console.log('destroyed');
|
||||||
|
},
|
||||||
|
handleWorkChange (e) {
|
||||||
|
this.src = e.detail.src
|
||||||
|
this.$refs.video.showToast('由于测试切换链接和当前播放链接是同一个所以不会触发视频切换')
|
||||||
|
},
|
||||||
|
handleLoaded (e) {
|
||||||
|
if ( e.type == 'init' ) {
|
||||||
|
// this.loadDanmu()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
decimalToRgb (decimal) {
|
||||||
|
var r = (decimal >> 16) & 255;
|
||||||
|
var g = (decimal >> 8) & 255;
|
||||||
|
var b = decimal & 255;
|
||||||
|
return 'rgb(' + r + ',' + g + ',' + b + ')'
|
||||||
|
},
|
||||||
|
toggle () {
|
||||||
|
this.$refs.video.toggle()
|
||||||
|
},
|
||||||
|
destroy () {
|
||||||
|
this.$refs.video.unload()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
::v-deep .fast-progress-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
border: 1px solid #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"edu-core": "git+https://git.nuttyreading.com/chenghuan/edu-core.git#v1.0.5",
|
"edu-core": "git+https://git.nuttyreading.com/chenghuan/edu-core.git#v1.0.8",
|
||||||
"jquery": "^3.7.1",
|
"jquery": "^3.7.1",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"qs": "^6.14.0",
|
"qs": "^6.14.0",
|
||||||
|
|||||||
12
pages.json
12
pages.json
@@ -23,6 +23,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "测试页",
|
||||||
|
"enablePullDownRefresh": true, // 禁止下拉刷新
|
||||||
|
"app-plus": {
|
||||||
|
"bounce": "none",
|
||||||
|
"titleNView": false,
|
||||||
|
"popGesture": "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/medicalRecords/index",
|
"path": "pages/medicalRecords/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -67,7 +67,6 @@ export default {
|
|||||||
secondCountDown: 10,
|
secondCountDown: 10,
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
screenLoading: false,
|
screenLoading: false,
|
||||||
isfresh: false,
|
|
||||||
currentCateIndex: 0,
|
currentCateIndex: 0,
|
||||||
currentVideo: {},
|
currentVideo: {},
|
||||||
videoList: {},
|
videoList: {},
|
||||||
@@ -167,18 +166,7 @@ export default {
|
|||||||
this.screenLoading = status;
|
this.screenLoading = status;
|
||||||
},
|
},
|
||||||
initVideo() {
|
initVideo() {
|
||||||
this.changeVideoLock = true
|
|
||||||
this.screenLoading = false;
|
this.screenLoading = false;
|
||||||
this.isfresh = false;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.isfresh = true;
|
|
||||||
// setTimeout(() => {
|
|
||||||
// this.$refs.commonVideo.init({
|
|
||||||
// currentVideo: this.currentVideo,
|
|
||||||
// currentVideoList: this.videoArray,
|
|
||||||
// });
|
|
||||||
// }, 200);
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
changeScreen(status) {
|
changeScreen(status) {
|
||||||
this.isFullScreen = status;
|
this.isFullScreen = status;
|
||||||
@@ -189,20 +177,8 @@ export default {
|
|||||||
this.$forceUpdate();
|
this.$forceUpdate();
|
||||||
},
|
},
|
||||||
handleFresh(status) {
|
handleFresh(status) {
|
||||||
this.isfresh = status;
|
|
||||||
this.$forceUpdate();
|
this.$forceUpdate();
|
||||||
},
|
},
|
||||||
changeVideo(data) {
|
|
||||||
if (data.id != this.currentVideo.id) {
|
|
||||||
this.isfresh = false;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.currentVideo = data;
|
|
||||||
this.currentVideoId = data.id;
|
|
||||||
this.initVideo()
|
|
||||||
this.isfresh = true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hancleModalCancel() {
|
hancleModalCancel() {
|
||||||
this.show = false;
|
this.show = false;
|
||||||
},
|
},
|
||||||
@@ -227,7 +203,6 @@ export default {
|
|||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
async getCourseDescriptionData() {
|
async getCourseDescriptionData() {
|
||||||
this.isfresh = false;
|
|
||||||
var data = {
|
var data = {
|
||||||
id: this.options.id,
|
id: this.options.id,
|
||||||
load: false,
|
load: false,
|
||||||
@@ -245,12 +220,12 @@ export default {
|
|||||||
that.curriculumData = res.data.detail;
|
that.curriculumData = res.data.detail;
|
||||||
that.videoArray = res.data.videos;
|
that.videoArray = res.data.videos;
|
||||||
console.log('视频数据列表', that.videoArray)
|
console.log('视频数据列表', that.videoArray)
|
||||||
|
console.log('章节详情', res.data)
|
||||||
if (that.videoArray.length > 0) {
|
if (that.videoArray.length > 0) {
|
||||||
that.convertToPlayerList();
|
that.convertToPlayerList();
|
||||||
that.currentVideo = that.videoArray[0];
|
that.currentVideo = that.videoArray[0];
|
||||||
that.currentVideoId = that.videoArray[0].id;
|
that.currentVideoId = res.data.current || that.videoArray[0].id;
|
||||||
that.initVideo()
|
that.initVideo()
|
||||||
that.isfresh = true;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
26
pages/index.vue
Normal file
26
pages/index.vue
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<view style="padding-top: 60rpx;">
|
||||||
|
<VideoPlayer />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import VideoPlayer from "@/components/video-player/video-player.vue";
|
||||||
|
// import YbPlayer from '@/libs/yb-player.js'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
VideoPlayer,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -97,7 +97,6 @@
|
|||||||
<view
|
<view
|
||||||
class="chong_list_item"
|
class="chong_list_item"
|
||||||
@click="onPageJump('/pages/wallet/points')"
|
@click="onPageJump('/pages/wallet/points')"
|
||||||
v-if="$platform == 'android'"
|
|
||||||
>
|
>
|
||||||
<view class="pay_item_img"> 积分 </view>
|
<view class="pay_item_img"> 积分 </view>
|
||||||
<view class="text" style="line-height: 30rpx">{{
|
<view class="text" style="line-height: 30rpx">{{
|
||||||
@@ -107,7 +106,6 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view
|
<view
|
||||||
v-if="$platform == 'android'"
|
|
||||||
class="chong_list_item"
|
class="chong_list_item"
|
||||||
style="flex-direction: initial; margin-right: 0"
|
style="flex-direction: initial; margin-right: 0"
|
||||||
>
|
>
|
||||||
@@ -154,8 +152,10 @@
|
|||||||
</common-list>
|
</common-list>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- <view style="text-align: center; margin-top: 20rpx; background-color: #5188e5; color: #fff; padding: 10rpx 0;" @click="onPageJump('/pages/index')">去测试页</view> -->
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
<u-popup :show="infoShow" mode="center" round="6" backgroundColor="#fff">
|
<u-popup :show="infoShow" mode="center" round="6" backgroundColor="#fff">
|
||||||
<view class="popup_box">
|
<view class="popup_box">
|
||||||
<view class="title">温馨提示</view>
|
<view class="title">温馨提示</view>
|
||||||
|
|||||||
@@ -118,9 +118,11 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<text class="order_time">下单时间:{{item.createTime}}</text>
|
<text class="order_time">下单时间:{{item.createTime}}</text>
|
||||||
<view class="order_statusbtn">
|
<view v-if="item.orderStatus == 0 && $platform == 'android'" class="order_statusbtn">
|
||||||
<text v-if="item.orderStatus == 0" @click.stop="goPay(item)">继续付款</text>
|
<text @click.stop="goPay(item)">继续付款</text>
|
||||||
<text v-if="item.orderStatus == 3">申请售后</text>
|
</view>
|
||||||
|
<view v-if="item.orderStatus == 3" class="order_statusbtn">
|
||||||
|
<text>申请售后</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -359,7 +359,7 @@ export default {
|
|||||||
color: "#fff",
|
color: "#fff",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (this.orderContet.orderStatus == 0) {
|
if (this.orderContet.orderStatus == 0 && this.$platform == 'android') {
|
||||||
this.customButton.push({
|
this.customButton.push({
|
||||||
width: "160rpx",
|
width: "160rpx",
|
||||||
text: "继续付款",
|
text: "继续付款",
|
||||||
|
|||||||
@@ -230,7 +230,7 @@ export default {
|
|||||||
}, function(results) {
|
}, function(results) {
|
||||||
// results 格式为数组存放恢复的IAP商品交易信息对象 IAPTransaction,通用需将返回的支付凭证传给后端进行二次认证
|
// results 格式为数组存放恢复的IAP商品交易信息对象 IAPTransaction,通用需将返回的支付凭证传给后端进行二次认证
|
||||||
that.ComplateRequestArr = results
|
that.ComplateRequestArr = results
|
||||||
console.log('未完成订单数组共有:', that.ComplateRequestArr.length)
|
console.log('未完成订单数组共有:', that.ComplateRequestArr)
|
||||||
if (results && results.length > 0) {
|
if (results && results.length > 0) {
|
||||||
results.map((item, index) => {
|
results.map((item, index) => {
|
||||||
that.finishTransaction(item);
|
that.finishTransaction(item);
|
||||||
|
|||||||
@@ -254,9 +254,21 @@
|
|||||||
methods: {
|
methods: {
|
||||||
dataIdWatcher (newVal) {
|
dataIdWatcher (newVal) {
|
||||||
if ( newVal ) {
|
if ( newVal ) {
|
||||||
this.dom = document.querySelector('.rvideo' + newVal)
|
// 延迟一下再查找 DOM 元素,确保 DOM 已经渲染完成
|
||||||
this.domSlot = document.querySelector('.rvideoslot' + newVal)
|
setTimeout(() => {
|
||||||
this.init()
|
this.dom = document.querySelector('.rvideo' + newVal)
|
||||||
|
this.domSlot = document.querySelector('.rvideoslot' + newVal)
|
||||||
|
// 检查 DOM 元素是否存在
|
||||||
|
if ( this.dom && this.domSlot ) {
|
||||||
|
this.init()
|
||||||
|
} else {
|
||||||
|
console.error('yb-video: DOM 元素未找到,可能渲染失败', {
|
||||||
|
dataId: newVal,
|
||||||
|
dom: this.dom,
|
||||||
|
domSlot: this.domSlot
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async init () {
|
async init () {
|
||||||
@@ -348,8 +360,9 @@
|
|||||||
parseSrc (path) {
|
parseSrc (path) {
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
const isHash = window.location.hash
|
const isHash = window.location.hash
|
||||||
const route = this.dom.getAttribute('data-route')
|
// 安全检查 this.dom 是否存在
|
||||||
const pathName = isHash ? window.location.pathname : window.location.pathname.replace(route, '')
|
const route = this.dom ? this.dom.getAttribute('data-route') : ''
|
||||||
|
const pathName = isHash ? window.location.pathname : window.location.pathname.replace(route || '', '')
|
||||||
return window.location.origin + pathName + path.substring(1)
|
return window.location.origin + pathName + path.substring(1)
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef APP-VUE
|
// #ifdef APP-VUE
|
||||||
@@ -455,6 +468,7 @@
|
|||||||
isLive: params.isLive,
|
isLive: params.isLive,
|
||||||
header: params.header,
|
header: params.header,
|
||||||
controls: params.controls,
|
controls: params.controls,
|
||||||
|
alwaysShowControls: params.alwaysShowControls,
|
||||||
height: '100%',
|
height: '100%',
|
||||||
objectFit: params.objectFit,
|
objectFit: params.objectFit,
|
||||||
crossOrigin: params.crossOrigin,
|
crossOrigin: params.crossOrigin,
|
||||||
@@ -465,6 +479,7 @@
|
|||||||
workIndex: params.workIndex,
|
workIndex: params.workIndex,
|
||||||
subtitles: params.subtitles,
|
subtitles: params.subtitles,
|
||||||
subtitleIndex: params.subtitleIndex,
|
subtitleIndex: params.subtitleIndex,
|
||||||
|
playbackRates: params.playbackRates,
|
||||||
custom,
|
custom,
|
||||||
decoder: {
|
decoder: {
|
||||||
hls: {
|
hls: {
|
||||||
|
|||||||
@@ -105,6 +105,11 @@
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: 1
|
default: 1
|
||||||
},
|
},
|
||||||
|
//倍速列表配置
|
||||||
|
playbackRates: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
//循环播放
|
//循环播放
|
||||||
loop: {
|
loop: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -219,8 +224,13 @@
|
|||||||
return 'web'
|
return 'web'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
// #endif
|
// #endif
|
||||||
|
//是否一直显示控件
|
||||||
|
alwaysShowControls: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
boxStyle () {
|
boxStyle () {
|
||||||
@@ -250,6 +260,7 @@
|
|||||||
created() {
|
created() {
|
||||||
//获取当前运行的平台
|
//获取当前运行的平台
|
||||||
this.updateHeight()
|
this.updateHeight()
|
||||||
|
console.log('倍速列表是否是ios YINGBING' + JSON.stringify(this.playbackRates))
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//接收消息
|
//接收消息
|
||||||
@@ -513,36 +524,38 @@
|
|||||||
//重加载视频
|
//重加载视频
|
||||||
async reloadVideo () {
|
async reloadVideo () {
|
||||||
const arg = {
|
const arg = {
|
||||||
src: this.parseSrc(this.src),
|
src: this.parseSrc(this.src),
|
||||||
segments: this.parseSegments(this.segments),
|
segments: this.parseSegments(this.segments),
|
||||||
title: this.title,
|
title: this.title,
|
||||||
poster: this.poster,
|
poster: this.poster,
|
||||||
type: this.type,
|
type: this.type,
|
||||||
three: this.three,
|
three: this.three,
|
||||||
initialTime: this.initialTime,
|
initialTime: this.initialTime,
|
||||||
duration: this.duration,
|
duration: this.duration,
|
||||||
autoplay: this.autoplay,
|
autoplay: this.autoplay,
|
||||||
preload: this.preload,
|
preload: this.preload,
|
||||||
muted: this.muted,
|
muted: this.muted,
|
||||||
loop: this.loop,
|
loop: this.loop,
|
||||||
playbackRate: this.playbackRate,
|
playbackRate: this.playbackRate,
|
||||||
isLive: this.isLive,
|
playbackRates: this.playbackRates,
|
||||||
header: this.header,
|
isLive: this.isLive,
|
||||||
controls: this.controls,
|
header: this.header,
|
||||||
objectFit: this.objectFit,
|
controls: this.controls,
|
||||||
crossOrigin: this.crossOrigin,
|
alwaysShowControls: this.alwaysShowControls,
|
||||||
openDirection: this.openDirection,
|
objectFit: this.objectFit,
|
||||||
exitDirection: this.exitDirection,
|
crossOrigin: this.crossOrigin,
|
||||||
quality: this.parseList(this.quality),
|
openDirection: this.openDirection,
|
||||||
works: this.works,
|
exitDirection: this.exitDirection,
|
||||||
workIndex: this.workIndex,
|
quality: this.parseList(this.quality),
|
||||||
subtitles: this.parseList(this.subtitles),
|
works: this.works,
|
||||||
subtitleIndex: this.subtitleIndex,
|
workIndex: this.workIndex,
|
||||||
custom: await this.parseCustom(),
|
subtitles: this.parseList(this.subtitles),
|
||||||
flvConfig: this.flvConfig,
|
subtitleIndex: this.subtitleIndex,
|
||||||
hlsConfig: this.hlsConfig,
|
custom: await this.parseCustom(),
|
||||||
jsmpegConfig: this.jsmpegConfig
|
flvConfig: this.flvConfig,
|
||||||
}
|
hlsConfig: this.hlsConfig,
|
||||||
|
jsmpegConfig: this.jsmpegConfig
|
||||||
|
}
|
||||||
this.evalJS('reloadVideo', arg)
|
this.evalJS('reloadVideo', arg)
|
||||||
},
|
},
|
||||||
//卸载视频
|
//卸载视频
|
||||||
@@ -608,7 +621,8 @@
|
|||||||
this.updateTimer = setTimeout(() => {
|
this.updateTimer = setTimeout(() => {
|
||||||
const arg = {
|
const arg = {
|
||||||
header: this.header,
|
header: this.header,
|
||||||
controls: this.controls
|
controls: this.controls,
|
||||||
|
alwaysShowControls: this.alwaysShowControls
|
||||||
}
|
}
|
||||||
this.evalJS('updateConfig', arg)
|
this.evalJS('updateConfig', arg)
|
||||||
}, 200)
|
}, 200)
|
||||||
@@ -778,6 +792,12 @@
|
|||||||
playbackRate (newVal) {
|
playbackRate (newVal) {
|
||||||
this.setVideo('playbackRate', newVal)
|
this.setVideo('playbackRate', newVal)
|
||||||
},
|
},
|
||||||
|
//监听倍速列表
|
||||||
|
playbackRates (newVal) {
|
||||||
|
if (newVal && newVal.length > 0) {
|
||||||
|
this.reloadVideo()
|
||||||
|
}
|
||||||
|
},
|
||||||
//监听循环属性
|
//监听循环属性
|
||||||
loop (newVal) {
|
loop (newVal) {
|
||||||
this.setVideo('loop', newVal)
|
this.setVideo('loop', newVal)
|
||||||
@@ -791,9 +811,13 @@
|
|||||||
this.updateConfig()
|
this.updateConfig()
|
||||||
},
|
},
|
||||||
//监听controls
|
//监听controls
|
||||||
controls () {
|
controls () {
|
||||||
this.updateConfig()
|
this.updateConfig()
|
||||||
},
|
},
|
||||||
|
//监听alwaysShowControls
|
||||||
|
alwaysShowControls () {
|
||||||
|
this.updateConfig()
|
||||||
|
},
|
||||||
//深度监听custom
|
//深度监听custom
|
||||||
custom: {
|
custom: {
|
||||||
handler(newVal, oldVal) {
|
handler(newVal, oldVal) {
|
||||||
|
|||||||
@@ -53,6 +53,14 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.yb-player-time {
|
||||||
|
min-width: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .yb-player-duration {
|
||||||
|
width: 35px;
|
||||||
|
} */
|
||||||
|
|
||||||
.yb-player-bottom-progress {
|
.yb-player-bottom-progress {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@@ -120,22 +128,22 @@
|
|||||||
width: 0;
|
width: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 2px;
|
height: 30px;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
.yb-player-range-track {
|
.yb-player-range-track {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 14px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 14px;
|
||||||
background-color: #999;
|
background-color: #999;
|
||||||
}
|
}
|
||||||
.yb-player-range-focus, .yb-player-range-preload {
|
.yb-player-range-focus, .yb-player-range-preload {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 14px;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 14px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
@@ -162,7 +170,7 @@
|
|||||||
background: none;
|
background: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2px;
|
height: 30px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -501,6 +509,11 @@
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.yb-player-center svg {
|
.yb-player-center svg {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|||||||
@@ -36,6 +36,7 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
isLive = _ref.isLive,
|
isLive = _ref.isLive,
|
||||||
header = _ref.header,
|
header = _ref.header,
|
||||||
controls = _ref.controls,
|
controls = _ref.controls,
|
||||||
|
alwaysShowControls = _ref.alwaysShowControls,
|
||||||
height = _ref.height,
|
height = _ref.height,
|
||||||
crossOrigin = _ref.crossOrigin,
|
crossOrigin = _ref.crossOrigin,
|
||||||
objectFit = _ref.objectFit,
|
objectFit = _ref.objectFit,
|
||||||
@@ -50,7 +51,8 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
works = _ref.works,
|
works = _ref.works,
|
||||||
workIndex = _ref.workIndex,
|
workIndex = _ref.workIndex,
|
||||||
subtitles = _ref.subtitles,
|
subtitles = _ref.subtitles,
|
||||||
subtitleIndex = _ref.subtitleIndex;
|
subtitleIndex = _ref.subtitleIndex,
|
||||||
|
playbackRates = _ref.playbackRates;
|
||||||
_classCallCheck(this, YbPlayer);
|
_classCallCheck(this, YbPlayer);
|
||||||
this.container = typeof container == 'string' ? document.querySelector(container) : container;
|
this.container = typeof container == 'string' ? document.querySelector(container) : container;
|
||||||
this.src = src; //播放链接
|
this.src = src; //播放链接
|
||||||
@@ -63,10 +65,31 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
this.loop = loop; //是否循环播放
|
this.loop = loop; //是否循环播放
|
||||||
this.muted = muted; //是否静音
|
this.muted = muted; //是否静音
|
||||||
this.playbackRate = playbackRate || 1; //默认播放倍速
|
this.playbackRate = playbackRate || 1; //默认播放倍速
|
||||||
|
console.log('倍速列表' + JSON.stringify(playbackRates))
|
||||||
|
this.playbackRates = playbackRates && playbackRates.length > 0 ? playbackRates : [{
|
||||||
|
text: '0.5倍速',
|
||||||
|
value: 0.5
|
||||||
|
}, {
|
||||||
|
text: '正常倍速',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
text: '1.5倍速',
|
||||||
|
value: 1.5
|
||||||
|
}, {
|
||||||
|
text: '1.75倍速',
|
||||||
|
value: 1.75
|
||||||
|
}, {
|
||||||
|
text: '2倍速',
|
||||||
|
value: 2
|
||||||
|
}, {
|
||||||
|
text: '3倍速',
|
||||||
|
value: 3
|
||||||
|
}]; //倍速列表配置
|
||||||
this.preload = preload; //是否预加载
|
this.preload = preload; //是否预加载
|
||||||
this.isLive = isLive; //是否直播
|
this.isLive = isLive; //是否直播
|
||||||
this.header = header; //显示头部控制栏
|
this.header = header; //显示头部控制栏
|
||||||
this.controls = controls; //显示底部控制栏
|
this.controls = controls; //显示底部控制栏
|
||||||
|
this.alwaysShowControls = alwaysShowControls; //是否一直显示控件
|
||||||
this.height = height || 'auto'; //视频高度
|
this.height = height || 'auto'; //视频高度
|
||||||
this.crossOrigin = crossOrigin; //跨域属性 anonymous-它有一个默认值。它定义了将在不传递凭据信息的情况下发送CORS请求 use-credentials-将发送带有凭据、cookie 和证书的 cross-origin 请求
|
this.crossOrigin = crossOrigin; //跨域属性 anonymous-它有一个默认值。它定义了将在不传递凭据信息的情况下发送CORS请求 use-credentials-将发送带有凭据、cookie 和证书的 cross-origin 请求
|
||||||
this.objectFit = objectFit; //当视频宽高超出容器时的表现形式 fill-内容拉伸填充 contain-保持比例内容缩放 cover-保持比例内容可能被剪切 none-内容不重置 scale-down-保持比例从none或contain选一个 initial-默认值
|
this.objectFit = objectFit; //当视频宽高超出容器时的表现形式 fill-内容拉伸填充 contain-保持比例内容缩放 cover-保持比例内容可能被剪切 none-内容不重置 scale-down-保持比例从none或contain选一个 initial-默认值
|
||||||
@@ -111,7 +134,12 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
}, {
|
}, {
|
||||||
key: "load",
|
key: "load",
|
||||||
value: function load() {
|
value: function load() {
|
||||||
this.container.innerHTML = "\n\t\t\t<div class=\"yb-player-wrapper\" style=\"height: ".concat(this.height, "\">\n\t\t\t\t<div class=\"yb-player-header\"></div>\n\t\t\t\t<div class=\"yb-player-controls\">\n\t\t\t\t\t<div class=\"yb-player-progress\"></div>\n\t\t\t\t\t<div class=\"yb-player-controls-bottom yb-player-hide yb-player-full\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"yb-player-locks yb-player-hide\">\n\t\t\t\t\t<div class=\"yb-player-lock yb-player-lock-left\">").concat(YbPlayer.lockIcon, "</div>\n\t\t\t\t\t<div class=\"yb-player-lock yb-player-lock-right\">").concat(YbPlayer.lockIcon, "</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"yb-player-danmu\"></div>\n\t\t\t\t<div class=\"yb-player-toast\"></div>\n\t\t\t\t<div class=\"yb-player-bottom-progress yb-player-hide\"></div>\n\t\t\t</div>\n\t\t");
|
var posterHtml = '';
|
||||||
|
// 针对 iOS 平台添加备用封面显示
|
||||||
|
if (this.poster && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
|
||||||
|
posterHtml = '<div class="yb-player-poster" style="position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(' + this.poster + ');background-size:cover;background-position:center;"></div>';
|
||||||
|
}
|
||||||
|
this.container.innerHTML = posterHtml + "\n\t\t\t<div class=\"yb-player-wrapper\" style=\"height: ".concat(this.height, "\">\n\t\t\t\t<div class=\"yb-player-header\"></div>\n\t\t\t\t<div class=\"yb-player-controls\">\n\t\t\t\t\t<div class=\"yb-player-progress\"></div>\n\t\t\t\t\t<div class=\"yb-player-controls-bottom yb-player-hide yb-player-full\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"yb-player-locks yb-player-hide\">\n\t\t\t\t\t<div class=\"yb-player-lock yb-player-lock-left\">").concat(YbPlayer.lockIcon, "</div>\n\t\t\t\t\t<div class=\"yb-player-lock yb-player-lock-right\">").concat(YbPlayer.lockIcon, "</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"yb-player-danmu\"></div>\n\t\t\t\t<div class=\"yb-player-toast\"></div>\n\t\t\t\t<div class=\"yb-player-bottom-progress yb-player-hide\"></div>\n\t\t\t</div>\n\t\t");
|
||||||
this._bindfullscreenerror = this._fullscreenerror.bind(this);
|
this._bindfullscreenerror = this._fullscreenerror.bind(this);
|
||||||
this._bindfullscreenchanged = this._fullscreenchanged.bind(this);
|
this._bindfullscreenchanged = this._fullscreenchanged.bind(this);
|
||||||
this.container.addEventListener('fullscreenerror', this._bindfullscreenerror);
|
this.container.addEventListener('fullscreenerror', this._bindfullscreenerror);
|
||||||
@@ -857,12 +885,13 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
wrapperEl.appendChild(toolbarEl); //先插入不显示的工具栏,因为需要计算工具栏尺寸
|
wrapperEl.appendChild(toolbarEl); //先插入不显示的工具栏,因为需要计算工具栏尺寸
|
||||||
var element = this.container.querySelector(selector); //获取点击选择器
|
var element = this.container.querySelector(selector); //获取点击选择器
|
||||||
var rect = element.getBoundingClientRect(); //获取点击元素的尺寸布局信息
|
var rect = element.getBoundingClientRect(); //获取点击元素的尺寸布局信息
|
||||||
|
var containerRect = this.container.getBoundingClientRect(); //获取容器相对于视口的位置
|
||||||
var boxWidth = this.container.offsetWidth;
|
var boxWidth = this.container.offsetWidth;
|
||||||
var boxHeight = this.container.offsetHeight;
|
var boxHeight = this.container.offsetHeight;
|
||||||
var top = rect.top + rect.height; //计算顶部定位
|
var top = rect.top - containerRect.top + rect.height; //计算顶部定位(相对于容器)
|
||||||
var left = rect.left; //计算左边定位
|
var left = rect.left - containerRect.left; //计算左边定位(相对于容器)
|
||||||
var right = boxWidth - rect.right; //计算右边定位
|
var right = containerRect.right - rect.right; //计算右边定位
|
||||||
var bottom = boxHeight - rect.bottom + rect.height; //计算底部定位
|
var bottom = containerRect.bottom - rect.bottom + rect.height; //计算底部定位
|
||||||
var isTop = true; //是否定位顶部 true-定位顶部 false-定位底部
|
var isTop = true; //是否定位顶部 true-定位顶部 false-定位底部
|
||||||
var isLeft = true; //是否定位左边 true-定位左边 false-定位右边
|
var isLeft = true; //是否定位左边 true-定位左边 false-定位右边
|
||||||
if (top > boxHeight / 2) isTop = false; //判断点击元素是否在盒子上半部
|
if (top > boxHeight / 2) isTop = false; //判断点击元素是否在盒子上半部
|
||||||
@@ -1072,25 +1101,7 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
key: "showPlaybackRate",
|
key: "showPlaybackRate",
|
||||||
value: function showPlaybackRate() {
|
value: function showPlaybackRate() {
|
||||||
var _this10 = this;
|
var _this10 = this;
|
||||||
var arr = [{
|
var arr = this.playbackRates;
|
||||||
text: '0.5倍速',
|
|
||||||
value: 0.5
|
|
||||||
}, {
|
|
||||||
text: '正常倍速',
|
|
||||||
value: 1
|
|
||||||
}, {
|
|
||||||
text: '1.5倍速',
|
|
||||||
value: 1.5
|
|
||||||
}, {
|
|
||||||
text: '1.75倍速',
|
|
||||||
value: 1.75
|
|
||||||
}, {
|
|
||||||
text: '2倍速',
|
|
||||||
value: 2
|
|
||||||
}, {
|
|
||||||
text: '3倍速',
|
|
||||||
value: 3
|
|
||||||
}];
|
|
||||||
var list = arr.map(function (a, k) {
|
var list = arr.map(function (a, k) {
|
||||||
return {
|
return {
|
||||||
text: a.text,
|
text: a.text,
|
||||||
@@ -1653,8 +1664,13 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
});
|
});
|
||||||
var children = progressEl.children;
|
var children = progressEl.children;
|
||||||
for (var i = 0; i < children.length; i++) {
|
for (var i = 0; i < children.length; i++) {
|
||||||
// children[i].onclick = arr[i].click
|
(function(index) {
|
||||||
YbPlayer.tap(children[i], arr[i].click);
|
var originalClick = arr[index].click;
|
||||||
|
YbPlayer.tap(children[index], function() {
|
||||||
|
if (originalClick) originalClick();
|
||||||
|
_this17.showControls();
|
||||||
|
});
|
||||||
|
})(i);
|
||||||
//如果标记了非全屏元素,则在全屏时需要隐藏
|
//如果标记了非全屏元素,则在全屏时需要隐藏
|
||||||
if (children[i].classList.contains('yb-player-unfull') && this.getFullscreen()) {
|
if (children[i].classList.contains('yb-player-unfull') && this.getFullscreen()) {
|
||||||
children[i].classList.add('yb-player-hide');
|
children[i].classList.add('yb-player-hide');
|
||||||
@@ -1771,8 +1787,13 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
});
|
});
|
||||||
var children = controlsBottomEl.children;
|
var children = controlsBottomEl.children;
|
||||||
for (var _i = 0; _i < children.length; _i++) {
|
for (var _i = 0; _i < children.length; _i++) {
|
||||||
// children[i].onclick = arr[i].click
|
(function(index) {
|
||||||
YbPlayer.tap(children[_i], arr[_i].click);
|
var originalClick = arr[index].click;
|
||||||
|
YbPlayer.tap(children[index], function() {
|
||||||
|
if (originalClick) originalClick();
|
||||||
|
_this17.showControls();
|
||||||
|
});
|
||||||
|
})(_i);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1844,8 +1865,13 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
});
|
});
|
||||||
var children = heightEl.children;
|
var children = heightEl.children;
|
||||||
for (var _i2 = 0; _i2 < children.length; _i2++) {
|
for (var _i2 = 0; _i2 < children.length; _i2++) {
|
||||||
// children[i].onclick = arr[i].click
|
(function(index) {
|
||||||
YbPlayer.tap(children[_i2], arr[_i2].click);
|
var originalClick = arr[index].click;
|
||||||
|
YbPlayer.tap(children[index], function() {
|
||||||
|
if (originalClick) originalClick();
|
||||||
|
_this17.showControls();
|
||||||
|
});
|
||||||
|
})(_i2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1855,13 +1881,19 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
if (slots.length > 0 && wrapperEl) {
|
if (slots.length > 0 && wrapperEl) {
|
||||||
var slotEl = document.createElement('DIV');
|
var slotEl = document.createElement('DIV');
|
||||||
slotEl.setAttribute('class', 'yb-player-slot');
|
slotEl.setAttribute('class', 'yb-player-slot');
|
||||||
|
var _this = this;
|
||||||
slots.forEach(function (slot, key) {
|
slots.forEach(function (slot, key) {
|
||||||
slotEl.innerHTML += slot.innerHTML;
|
slotEl.innerHTML += slot.innerHTML;
|
||||||
});
|
});
|
||||||
var children = slotEl.children;
|
var children = slotEl.children;
|
||||||
for (var _i3 = 0; _i3 < children.length; _i3++) {
|
for (var _i3 = 0; _i3 < children.length; _i3++) {
|
||||||
// children[i].onclick = slots[i].click
|
(function(index) {
|
||||||
YbPlayer.tap(children[_i3], slots[_i3].click);
|
var originalClick = slots[index].click;
|
||||||
|
YbPlayer.tap(children[index], function() {
|
||||||
|
if (originalClick) originalClick();
|
||||||
|
_this.showControls();
|
||||||
|
});
|
||||||
|
})(_i3);
|
||||||
if (slots[_i3].followControls) {
|
if (slots[_i3].followControls) {
|
||||||
children[_i3].setAttribute('data-controls', 1);
|
children[_i3].setAttribute('data-controls', 1);
|
||||||
if (!this.getControls()) children[_i3].classList.add('yb-player-hide');
|
if (!this.getControls()) children[_i3].classList.add('yb-player-hide');
|
||||||
@@ -1871,6 +1903,10 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
}
|
}
|
||||||
//重新设置一次全屏状态
|
//重新设置一次全屏状态
|
||||||
this._setFullscreenStatus();
|
this._setFullscreenStatus();
|
||||||
|
// 如果设置了alwaysShowControls,自动显示控件
|
||||||
|
if (this.alwaysShowControls) {
|
||||||
|
this.showControls();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//卸载自定义
|
//卸载自定义
|
||||||
}, {
|
}, {
|
||||||
@@ -2089,7 +2125,13 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
value: function setConfig(key, value) {
|
value: function setConfig(key, value) {
|
||||||
var _this20 = this;
|
var _this20 = this;
|
||||||
Object.keys(this).forEach(function (k) {
|
Object.keys(this).forEach(function (k) {
|
||||||
if (k == key) _this20[k] = value;
|
if (k == key) {
|
||||||
|
_this20[k] = value;
|
||||||
|
//如果更新的是alwaysShowControls属性,需要重新显示控件
|
||||||
|
if (k == 'alwaysShowControls' && value) {
|
||||||
|
_this20.showControls();
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//动态手势事件配置
|
//动态手势事件配置
|
||||||
@@ -2669,19 +2711,27 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
value: function exitFullscreen() {
|
value: function exitFullscreen() {
|
||||||
var _this26 = this;
|
var _this26 = this;
|
||||||
this.setDirection(false).then(function () {
|
this.setDirection(false).then(function () {
|
||||||
var cfs = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen || document.webkitExitFullscreen;
|
// #ifdef APP-PLUS
|
||||||
if (typeof cfs != 'undefined' && cfs) {
|
// 不使用浏览器的退出全屏了,全部通过css模拟退出全屏
|
||||||
cfs.call(document);
|
_this26.container.classList.remove('yb-player-openfull');
|
||||||
} else if (typeof window.ActiveXObject !== "undefined") {
|
_this26._fullscreenchanged();
|
||||||
//IE浏览器,模拟按下F11键退出全屏
|
// #endif
|
||||||
var wscript = new ActiveXObject("WScript.Shell");
|
|
||||||
if (wscript != null) {
|
// #ifndef APP-PLUS
|
||||||
wscript.SendKeys("{F11}");
|
// var cfs = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen || document.webkitExitFullscreen;
|
||||||
}
|
// if (typeof cfs != 'undefined' && cfs) {
|
||||||
} else {
|
// cfs.call(document);
|
||||||
_this26.container.classList.remove('yb-player-openfull');
|
// } else if (typeof window.ActiveXObject !== "undefined") {
|
||||||
_this26._fullscreenchanged();
|
// //IE浏览器,模拟按下F11键退出全屏
|
||||||
}
|
// var wscript = new ActiveXObject("WScript.Shell");
|
||||||
|
// if (wscript != null) {
|
||||||
|
// wscript.SendKeys("{F11}");
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// _this26.container.classList.remove('yb-player-openfull');
|
||||||
|
// _this26._fullscreenchanged();
|
||||||
|
// }
|
||||||
|
// #endif
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//开启全屏
|
//开启全屏
|
||||||
@@ -2691,18 +2741,25 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
var _this27 = this;
|
var _this27 = this;
|
||||||
this.openDirection = direction || this.openDirection;
|
this.openDirection = direction || this.openDirection;
|
||||||
this.setDirection(true).then(function () {
|
this.setDirection(true).then(function () {
|
||||||
var rfs = document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen || document.documentElement.mozRequestFullscreen || document.documentElement.requestFullScreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen;
|
// #ifdef APP-PLUS
|
||||||
if (typeof rfs != 'undefined' && rfs) {
|
// 不使用浏览器的全屏了,全部通过css模拟全屏
|
||||||
rfs.call(_this27.container);
|
_this27._fullscreenerror();
|
||||||
} else if (typeof window.ActiveXObject !== "undefined") {
|
// #endif
|
||||||
//IE浏览器,模拟按下F11全屏
|
|
||||||
var wscript = new ActiveXObject("WScript.Shell");
|
// #ifndef APP-PLUS
|
||||||
if (wscript != null) {
|
// var rfs = document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen || document.documentElement.mozRequestFullscreen || document.documentElement.requestFullScreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen;
|
||||||
wscript.SendKeys("{F11}");
|
// if (typeof rfs != 'undefined' && rfs) {
|
||||||
}
|
// rfs.call(_this27.container);
|
||||||
} else {
|
// } else if (typeof window.ActiveXObject !== "undefined") {
|
||||||
_this27._fullscreenerror();
|
// //IE浏览器,模拟按下F11全屏
|
||||||
}
|
// var wscript = new ActiveXObject("WScript.Shell");
|
||||||
|
// if (wscript != null) {
|
||||||
|
// wscript.SendKeys("{F11}");
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// _this27._fullscreenerror();
|
||||||
|
// }
|
||||||
|
// #endif
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//是否支持全屏API
|
//是否支持全屏API
|
||||||
@@ -2759,14 +2816,17 @@ var YbPlayer = /*#__PURE__*/function () {
|
|||||||
this.emit('controlschange', {
|
this.emit('controlschange', {
|
||||||
show: true
|
show: true
|
||||||
});
|
});
|
||||||
this._controlsTimer = window.setTimeout(function () {
|
if (!this.alwaysShowControls) {
|
||||||
_this28.hideControls();
|
this._controlsTimer = window.setTimeout(function () {
|
||||||
}, 5000);
|
_this28.hideControls();
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
//关闭控制栏
|
//关闭控制栏
|
||||||
}, {
|
}, {
|
||||||
key: "hideControls",
|
key: "hideControls",
|
||||||
value: function hideControls(item, timer) {
|
value: function hideControls(item, timer) {
|
||||||
|
if (this.alwaysShowControls) return;
|
||||||
this._clearControlsTimer();
|
this._clearControlsTimer();
|
||||||
this.container.getElementsByClassName('yb-player-controls')[0].classList.remove('yb-player-controls-show');
|
this.container.getElementsByClassName('yb-player-controls')[0].classList.remove('yb-player-controls-show');
|
||||||
this.container.getElementsByClassName('yb-player-header')[0].classList.remove('yb-player-header-show');
|
this.container.getElementsByClassName('yb-player-header')[0].classList.remove('yb-player-header-show');
|
||||||
|
|||||||
@@ -69,6 +69,7 @@
|
|||||||
isLive: params.isLive,
|
isLive: params.isLive,
|
||||||
header: params.header,
|
header: params.header,
|
||||||
controls: params.controls,
|
controls: params.controls,
|
||||||
|
alwaysShowControls: params.alwaysShowControls,
|
||||||
height: '100%',
|
height: '100%',
|
||||||
objectFit: params.objectFit,
|
objectFit: params.objectFit,
|
||||||
crossOrigin: params.crossOrigin,
|
crossOrigin: params.crossOrigin,
|
||||||
@@ -79,6 +80,7 @@
|
|||||||
workIndex: params.workIndex,
|
workIndex: params.workIndex,
|
||||||
subtitles: params.subtitles,
|
subtitles: params.subtitles,
|
||||||
subtitleIndex: params.subtitleIndex,
|
subtitleIndex: params.subtitleIndex,
|
||||||
|
playbackRates: params.playbackRates,
|
||||||
custom: params.custom,
|
custom: params.custom,
|
||||||
decoder: {
|
decoder: {
|
||||||
hls: {
|
hls: {
|
||||||
|
|||||||
Reference in New Issue
Block a user