refactor(video): 移除静态广告组件并添加视频快进快退功能
- 删除未使用的静态广告组件及相关文件（MyComponent.vue、staticadcomponent/、videoDetail.vue等） - 在视频播放器中添加自定义快进（+15秒）和快退（-15秒）按钮组件 - 移除未使用的iOS视频组件注册 - 优化播放器控制栏布局和样式
This commit is contained in:
@@ -25,7 +25,8 @@
|
||||
:change:isSetFirstTime="renderScript.receiveisSetFirstTime"
|
||||
:change:isfresh="renderScript.receiveIsfresh" :change:platform="renderScript.receiveplatform"
|
||||
:change:isChange="renderScript.receiveIsChange"
|
||||
:change:currentVideoList="renderScript.receiveVideoList"></div>
|
||||
:change:currentVideoList="renderScript.receiveVideoList">
|
||||
</div>
|
||||
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false" class="videoContent1">
|
||||
直接调用renderjs中的emitData的方法,传递当前播放时长
|
||||
</div>
|
||||
@@ -470,6 +471,9 @@
|
||||
var diff = 0
|
||||
var pauseTime = 0
|
||||
var myplayer = undefined
|
||||
var seekBtnHideTimer = null
|
||||
var seekBtnEls = []
|
||||
var seekBtnsEnabled = true
|
||||
import $ from 'jquery'
|
||||
export default {
|
||||
components: {
|
||||
@@ -634,6 +638,113 @@
|
||||
},
|
||||
|
||||
});
|
||||
var backBtnComponent = Aliplayer.Component({
|
||||
init: function(status, toAddress) {
|
||||
this.fullScreenStatus = status
|
||||
this.$html = $('#url-player-test');
|
||||
},
|
||||
createEl: function(el) {
|
||||
seekBtnsEnabled = true;
|
||||
|
||||
var container = $('#url-player-test');
|
||||
container.find('.custom-seek-back').remove();
|
||||
container.find('.custom-seek-forward').remove();
|
||||
|
||||
seekBtnEls = [];
|
||||
|
||||
function createSeekBtn(className, label, position) {
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'custom-seek-btn ' + className;
|
||||
btn.innerText = label;
|
||||
btn.style.position = 'absolute';
|
||||
btn.style.top = '50%';
|
||||
btn.style.transform = 'translateY(-50%)';
|
||||
btn.style.width = '48px';
|
||||
btn.style.height = '48px';
|
||||
btn.style.borderRadius = '50%';
|
||||
btn.style.border = 'none';
|
||||
btn.style.background = 'rgba(255,255,255,0.6)';
|
||||
btn.style.color = '#000';
|
||||
btn.style.fontSize = '14px';
|
||||
btn.style.display = 'flex';
|
||||
btn.style.alignItems = 'center';
|
||||
btn.style.justifyContent = 'center';
|
||||
btn.style.padding = '0';
|
||||
btn.style.display = 'none';
|
||||
btn.style.zIndex = '10';
|
||||
if (position === 'left') {
|
||||
btn.style.left = '30px';
|
||||
} else if (position === 'right') {
|
||||
btn.style.right = '30px';
|
||||
}
|
||||
return btn;
|
||||
}
|
||||
|
||||
var backBtn = createSeekBtn('custom-seek-back', '-15s', 'left');
|
||||
var forwardBtn = createSeekBtn('custom-seek-forward', '+15s', 'right');
|
||||
|
||||
seekBtnEls = [backBtn, forwardBtn];
|
||||
|
||||
var showSeekBtns = function() {
|
||||
if (!seekBtnsEnabled) return;
|
||||
if (!seekBtnEls || !seekBtnEls.length) return;
|
||||
seekBtnEls.forEach(function(btn) {
|
||||
btn.style.display = 'flex';
|
||||
});
|
||||
if (seekBtnHideTimer) {
|
||||
clearTimeout(seekBtnHideTimer);
|
||||
}
|
||||
seekBtnHideTimer = setTimeout(function() {
|
||||
if (!seekBtnEls || !seekBtnEls.length) return;
|
||||
seekBtnEls.forEach(function(btn) {
|
||||
btn.style.display = 'none';
|
||||
});
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
backBtn.onclick = function(e) {
|
||||
if (e && e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
showSeekBtns();
|
||||
if (myplayer && myplayer.getCurrentTime) {
|
||||
var current = myplayer.getCurrentTime();
|
||||
var target = current - 15;
|
||||
if (target < 0) {
|
||||
target = 0;
|
||||
}
|
||||
myplayer.seek(target);
|
||||
}
|
||||
};
|
||||
|
||||
forwardBtn.onclick = function(e) {
|
||||
if (e && e.stopPropagation) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
showSeekBtns();
|
||||
if (myplayer && myplayer.getCurrentTime && myplayer.getDuration) {
|
||||
var current = myplayer.getCurrentTime();
|
||||
var duration = myplayer.getDuration();
|
||||
var target = current + 15;
|
||||
if (target > duration) {
|
||||
target = duration;
|
||||
}
|
||||
myplayer.seek(target);
|
||||
}
|
||||
};
|
||||
|
||||
var containerDom = document.getElementById('url-player-test');
|
||||
if (containerDom) {
|
||||
containerDom.addEventListener('click', function() {
|
||||
showSeekBtns();
|
||||
});
|
||||
}
|
||||
|
||||
container.append(backBtn);
|
||||
container.append(forwardBtn);
|
||||
},
|
||||
playing: function(player, e) {},
|
||||
});
|
||||
// console.log('这是查看是否获取到hlstoken', this.videoData)
|
||||
var playerOptions = {
|
||||
id: "url-player-test",
|
||||
@@ -648,11 +759,12 @@
|
||||
"controlBarVisibility": "hover",
|
||||
"useH5Prism": true,
|
||||
components: [{
|
||||
name: 'adComponent',
|
||||
type: fullScreenButtonComponent,
|
||||
args: [
|
||||
'http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png'
|
||||
]
|
||||
name: 'fullScreenComponent',
|
||||
type: fullScreenButtonComponent
|
||||
},
|
||||
{
|
||||
name: 'backBtnComponent',
|
||||
type: backBtnComponent
|
||||
},
|
||||
{
|
||||
name: 'RateComponent',
|
||||
@@ -663,9 +775,7 @@
|
||||
|
||||
skinLayout: [{
|
||||
name: "bigPlayButton",
|
||||
align: "blabs",
|
||||
x: 30,
|
||||
y: 80
|
||||
align: "cc",
|
||||
},
|
||||
{
|
||||
name: "H5Loading",
|
||||
@@ -689,6 +799,12 @@
|
||||
{
|
||||
name: "thumbnail"
|
||||
},
|
||||
{
|
||||
name: "backBtnComponent",
|
||||
align: "blabs",
|
||||
x: 15,
|
||||
y:70
|
||||
},
|
||||
{
|
||||
name: "controlBar",
|
||||
align: "blabs",
|
||||
@@ -781,6 +897,12 @@
|
||||
console.log('开始播放------',videoDurationTimes,pauseTime);
|
||||
$('.videoContent7').click()
|
||||
|
||||
seekBtnsEnabled = true;
|
||||
if (seekBtnHideTimer) {
|
||||
clearTimeout(seekBtnHideTimer);
|
||||
seekBtnHideTimer = null;
|
||||
}
|
||||
|
||||
if (pauseTime > 0) {
|
||||
if(pauseTime==videoDurationTimes){
|
||||
return
|
||||
@@ -830,11 +952,48 @@
|
||||
console.log('播放完毕');
|
||||
$('.videoContent2').click()
|
||||
$('.videoContent6').click()
|
||||
|
||||
seekBtnsEnabled = false;
|
||||
if (seekBtnHideTimer) {
|
||||
clearTimeout(seekBtnHideTimer);
|
||||
seekBtnHideTimer = null;
|
||||
}
|
||||
if (seekBtnEls && seekBtnEls.length) {
|
||||
seekBtnEls.forEach(function(btn) {
|
||||
btn.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
var $bigBtn = $('#url-player-test .prism-big-play-btn');
|
||||
if ($bigBtn && $bigBtn.length) {
|
||||
$bigBtn.css({
|
||||
left: '30px',
|
||||
bottom: '80px',
|
||||
right: 'auto',
|
||||
top: 'auto',
|
||||
transform: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
player.on('pause', function() {
|
||||
pauseTime = parseInt(player.getCurrentTime())
|
||||
player.pause(true)
|
||||
console.log('触发暂停', pauseTime)
|
||||
|
||||
if (player.getStatus && player.getStatus() === 'ended') {
|
||||
return;
|
||||
}
|
||||
|
||||
var $bigBtn = $('#url-player-test .prism-big-play-btn');
|
||||
if ($bigBtn && $bigBtn.length) {
|
||||
$bigBtn.css({
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
right: 'auto',
|
||||
bottom: 'auto',
|
||||
transform: 'translate(-50%, -50%)'
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
myplayer.on('error', function() {
|
||||
@@ -1182,4 +1341,26 @@
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
#url-player-test {
|
||||
position: relative;
|
||||
}
|
||||
#url-player-test .custom-seek-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
#url-player-test .custom-seek-btn:active {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user