播放进度 #
注意:播放器默认不会回调进度,需要手动调用方法获取。
第一步、注册回调 #
initialize
之后,start
之前注册回调
videoPlayer.value?.setDurationCallback(durationCallback)
videoPlayer.value?.setProgressCallback(progressCallback)
第二步、播放器开始播放事件(onPlayerPlaying
)后,开启定时器获取播放时长和当前进度 #
const onPlayerPlaying = () => {
startDurationTimer()
startProgressTimer()
}
function startDurationTimer() {
stopDurationTimer()
durationTimer = setInterval(() => {
videoPlayer.value?.getDuration()
}, 500)
}
function startProgressTimer() {
stopProgressTimer()
progressTimer = setInterval(() => {
videoPlayer.value?.getCurrentPosition()
}, 500)
}
注意:播放停止的时候需要关闭获取进度定时器
完整示例
<template>
<div class="es-sdk-root-css">
<es-video-player
ref="videoPlayer"
:playerWidth="playerWidth"
:playerHeight="playerHeight"
class="es-video-player-page-css"
@onPlayerPlayMediaSource="onPlayerPlayMediaSource"
@onPlayerInitialized="onPlayerInitialized"
@onPlayerPlaying="onPlayerPlaying"
/>
<s-title-view class="es-sdk-content-title-css" :text="$options.name" />
<div class="es-sdk-content-divider-css" />
<div class="es-sdk-content-row-css">
<span class="es-video-player-text-css" text="总时长:" />
<span class="es-video-player-text-css" :text="duration + ''" />
<span class="es-video-player-text-css" text="当前进度:" />
<span class="es-video-player-text-css" :text="progress + ''" />
<span class="es-video-player-text-css" text=" " />
<span class="es-video-player-text-css" text="播放索引:" />
<span class="es-video-player-text-css" :text="playingMediaIndex + ''" />
</div>
<div class="es-sdk-content-row-css">
<s-text-button text="播放上一源" @onButtonClicked="playPreviousMedia" />
<s-text-button text="播放下一源" @onButtonClicked="playNextMedia" />
</div>
<div class="es-sdk-content-row-css">
<s-text-button text="快进" @onButtonClicked="seekForward" />
<s-text-button text="快退" @onButtonClicked="seekBackward" />
</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { useESLog } from '@extscreen/es3-core'
import { ESVideoPlayer } from '@extscreen/es3-video-player'
import { useESRouter } from '@extscreen/es3-router'
import type {
ESIPlayer,
ESMediaSource,
ESMediaSourceList,
} from '@extscreen/es3-player'
const TAG = 'ESVideoPlayerPage'
export default defineComponent({
name: '播放进度',
components: {
'es-video-player': ESVideoPlayer,
},
setup() {
const log = useESLog()
const router = useESRouter()
const videoPlayer = ref<ESIPlayer>()
const playerWidth = 1920
const playerHeight = 1080
const duration = ref(0)
const progress = ref(0)
const playingMediaIndex = ref(-1)
let durationTimer = null
let progressTimer = null
function onPlayerPlayMediaSource(mediaSource: ESMediaSource) {
log.e(TAG, '-------onPlayerPlayMediaSource--------->>>>>', mediaSource)
playingMediaIndex.value =
videoPlayer.value?.getPlayingMediaSourceIndex() ?? -1
}
function playPreviousMedia() {
videoPlayer.value?.playPreviousMediaSource()
}
function playNextMedia() {
videoPlayer.value?.playNextMediaSource()
}
function durationCallback(d: number) {
duration.value = d
}
function progressCallback(p: number) {
progress.value = p
}
//
function seekForward() {
videoPlayer.value?.seekTo(progress.value + 10000)
}
function seekBackward() {
if (progress.value - 10000 > 0) {
videoPlayer.value?.seekTo(progress.value - 10000)
}
}
//--------------------------------------------------------------
function startDurationTimer() {
stopDurationTimer()
durationTimer = setInterval(() => {
videoPlayer.value?.getDuration()
}, 500)
}
function stopDurationTimer() {
if (durationTimer) {
clearInterval(durationTimer)
}
}
function startProgressTimer() {
stopProgressTimer()
progressTimer = setInterval(() => {
videoPlayer.value?.getCurrentPosition()
}, 500)
}
function stopProgressTimer() {
if (progressTimer) {
clearInterval(progressTimer)
}
}
//--------------------------------------------------------------
const onESCreate = () => {
log.e(TAG, '-------onESCreate------start---->>>>>')
videoPlayer.value?.initialize()
videoPlayer.value?.setDurationCallback(durationCallback)
videoPlayer.value?.setProgressCallback(progressCallback)
}
const onESStop = () => {
log.e(TAG, '-------onESStop---------->>>>>')
stopDurationTimer()
stopProgressTimer()
}
const onPlayerPlaying = () => {
startDurationTimer()
startProgressTimer()
}
const onPlayerInitialized = (playerType) => {
log.e(TAG, '-------onESCreate------onPlayerInitialized---->>>>>')
const mediaSourceList: ESMediaSourceList = {
index: 0,
list: [
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/01/27/85a658d6-d0ce-4721-adea-f8e2e0b263a7.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/LIB/VARIETY/2022/03/10/2877b7e1-fda6-4591-aff3-3fd3ba4151cf_transcode_1137855.mp4',
},
],
}
log.e(TAG, '-------onPlayerInitialized---------->>>>>', playerType)
videoPlayer.value?.playMediaSourceList(mediaSourceList)
videoPlayer.value?.start(0)
}
function onBackPressed() {
videoPlayer.value?.stop()
videoPlayer.value?.release()
router.back()
}
return {
duration,
progress,
playingMediaIndex,
onESCreate,
onESStop,
onPlayerInitialized,
onPlayerPlaying,
playerWidth,
playerHeight,
videoPlayer,
onBackPressed,
playPreviousMedia,
playNextMedia,
seekBackward,
seekForward,
onPlayerPlayMediaSource,
}
},
})
</script>
<style>
.es-video-player-page-css {
position: absolute;
}
.es-video-player-text-css {
color: white;
font-size: 30px;
margin-left: 20px;
margin-right: 20px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
</style>