播放控制 #
- 开始播放:
start
- 暂停播放:
pause
- 恢复播放:
resume
- 停止播放:
stop
- 播放下一个源:
playNextMediaSource
- 播放上一个源:
playPreviousMediaSource
- 根据id播放源:
playMediaSourceById
- 根据index播放源:
playMediaSourceByIndex
- 播放下一个媒资:
playNextMedia
- 播放上一个媒资:
playPreviousMedia
- 根据id播放媒资:
playMediaById
- 根据index播放媒资:
playMediaByIndex
完整示例
<template>
<div class="es-sdk-root-css">
<es-player-manager
ref="playerManager"
:initPlayerWindowType="2"
:playerList="playerListRef"
class="es-video-player-manager-page-css"
@onPlayerPlayMedia="onPlayerPlayMedia"
@onPlayerPlayMediaSource="onPlayerPlayMediaSource"
@onPlayerPlaying="onPlayerPlaying"
/>
<s-title-view class="es-sdk-content-title-css" :text="$options.name" />
<div class="es-sdk-content-row-css">
<span class="es-player-manager-text-css" text="总时长:" />
<span class="es-player-manager-text-css" :text="duration + ''" />
<span class="es-player-manager-text-css" text="当前进度:" />
<span class="es-player-manager-text-css" :text="progress + ''" />
</div>
<div class="es-sdk-content-divider-css" />
<div class="es-sdk-content-row-css">
<s-text-button text="播放上一集" @onButtonClicked="playPreviousMedia" />
<s-text-button text="播放下一集" @onButtonClicked="playNextMedia" />
<span class="es-player-manager-text-css" text="播放MediaItem索引:" />
<span
class="es-player-manager-text-css"
:text="playingMediaItemIndex + ''"
/>
<span class="es-player-manager-text-css" text="播放MediaItem:" />
<span class="es-player-manager-text-css" :text="playingMediaItem + ''" />
</div>
<div class="es-sdk-content-divider-css" />
<div class="es-sdk-content-row-css">
<s-text-button
text="播放上一源"
@onButtonClicked="playPreviousMediaSource"
/>
<s-text-button text="播放下一源" @onButtonClicked="playNextMediaSource" />
<span class="es-player-manager-text-css" text="播放MediaSource索引:" />
<span
class="es-player-manager-text-css"
:text="playingMediaSourceIndex + ''"
/>
<span class="es-player-manager-text-css" text="播放MediaSource:" />
<span
class="es-player-manager-text-css"
:text="playingMediaSource + ''"
/>
</div>
<div class="es-sdk-content-divider-css" />
<div class="es-sdk-content-row-css">
<s-text-button text="开始" @onButtonClicked="start" />
<s-text-button text="暂停" @onButtonClicked="pause" />
<span class="es-player-manager-text-css" text=" " />
<s-text-button text="恢复" @onButtonClicked="resume" />
<s-text-button text="停止" @onButtonClicked="stop" />
</div>
</div>
</template>
<script lang="ts">
import { markRaw, ref } from 'vue'
import { defineComponent } from '@vue/runtime-core'
import { ESPlayerManager } from '@extscreen/es3-player-manager'
import { ESLogLevel, useESLog } from '@extscreen/es3-core'
import { ESVideoPlayer } from '@extscreen/es3-video-player'
import type {
ESIPlayerManager,
ESMediaItem,
ESMediaItemList,
} from '@extscreen/es3-player-manager'
import type { ESMediaSource } from '@extscreen/es3-player'
const TAG = 'ESVideoPlayerManagerPage'
export default defineComponent({
name: '播放控制',
components: {
'es-player-manager': ESPlayerManager,
},
setup() {
const log = useESLog()
const playerManager = ref<ESIPlayerManager>()
const playerList = [markRaw(ESVideoPlayer)]
const playerListRef = ref(playerList)
const playingMediaItem = ref('')
const playingMediaItemIndex = ref(-1)
const playingMediaSource = ref('')
const playingMediaSourceIndex = ref(-1)
let isPaused = false
const duration = ref(0)
const progress = ref(0)
let durationTimer = null
let progressTimer = null
function onPlayerPlayMedia(mediaItem: ESMediaItem) {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.e(TAG, '-------onPlayerPlayMedia---------->>>>>', mediaItem)
}
playingMediaItem.value = JSON.stringify(mediaItem)
playingMediaItemIndex.value =
playerManager.value?.getPlayingMediaIndex() ?? -1
}
function onPlayerPlayMediaSource(mediaSource: ESMediaSource) {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.e(TAG, '-------onPlayerPlayMediaSource---------->>>>>', mediaSource)
}
playingMediaSource.value = JSON.stringify(mediaSource)
playingMediaSourceIndex.value =
playerManager.value?.getPlayingMediaSourceIndex() ?? -1
}
function playPreviousMedia() {
playerManager.value?.playPreviousMedia()
}
function playNextMedia() {
playerManager.value?.playNextMedia()
}
function playPreviousMediaSource() {
playerManager.value?.playPreviousMediaSource()
}
function playNextMediaSource() {
playerManager.value?.playNextMediaSource()
}
//
function start() {
playerManager.value?.start(0)
}
function pause() {
playerManager.value?.pause()
}
function resume() {
playerManager.value?.resume()
}
function stop() {
stopDurationTimer()
stopProgressTimer()
playerManager.value?.stop()
}
function durationCallback(d: number) {
duration.value = d
}
function progressCallback(p: number) {
progress.value = p
}
function startDurationTimer() {
stopDurationTimer()
durationTimer = setInterval(() => {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.e(TAG, '-------getDuration---------->>>>>')
}
playerManager.value?.getDuration()
}, 500)
}
function stopDurationTimer() {
if (durationTimer) {
clearInterval(durationTimer)
}
}
function startProgressTimer() {
stopProgressTimer()
progressTimer = setInterval(() => {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.e(TAG, '-------getCurrentPosition---------->>>>>')
}
playerManager.value?.getCurrentPosition()
}, 500)
}
function stopProgressTimer() {
if (progressTimer) {
clearInterval(progressTimer)
}
}
const onPlayerPlaying = () => {
startDurationTimer()
startProgressTimer()
}
const onESCreate = () => {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.e(TAG, '-------onESCreate---------->>>>>')
}
isPaused = false
const mediaItemZero: ESMediaItem = {
mediaSourceList: {
index: 0,
list: [
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/23/7bd80eb0-6a46-4210-b571-19407f036f0c.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/12/d5a1137c-8bf5-4e48-8017-1f683a913661.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/08/24f6bef3-7f7a-4fd1-a1b8-c3a40ba27d5c.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/2c529e68-0a81-4d9d-8dc1-f334c2a083ed.mp4',
},
],
},
}
const mediaItemOne: ESMediaItem = {
mediaSourceList: {
index: 0,
list: [
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/03/08/3af6f84b-f112-48bb-955d-dee58d0e2cce.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/04/02/2e948bf8-7822-45a1-8b54-c57c70c916f1.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/26/8bfff5ec-af9a-4073-ac95-2096bf31fbc3_transcode_1137855.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/25/c7c3fb1b-11ea-4452-ae89-6665d44487bf_transcode_1137855.mp4',
},
],
},
}
const mediaItemTwo: ESMediaItem = {
mediaSourceList: {
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/10/27/cd3c86d4-37a8-4c52-8d0c-7ef2cbf1d224_transcode_1137855.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/72254d7a-4653-42ad-aaaa-f5be7b2a8ad5_transcode_1137855.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/a006834a-b093-4ab9-8691-090394af3a75_transcode_1137855.mp4',
},
],
},
}
const mediaItemThree: ESMediaItem = {
mediaSourceList: {
index: 0,
list: [
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/21/0ec11cc9-dec8-469a-a0b8-0ae735bc7420_transcode_1137855.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/21/7bb303c0-5ff2-438a-8459-21199668e4fc_transcode_1137855.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/21/13d108a4-ad53-40b6-a092-e9fe0e903925_transcode_1137855.mp4',
},
{
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/21/aa8d0dad-705c-4430-9cf9-6f68eedd02b7_transcode_1137855.mp4',
},
],
},
}
const playList: ESMediaItemList = {
index: 0,
list: [mediaItemZero, mediaItemOne, mediaItemTwo, mediaItemThree],
}
playerManager.value?.initialize()
playerManager.value?.setDurationCallback(durationCallback)
playerManager.value?.setProgressCallback(progressCallback)
playerManager.value?.playMediaList(playList)
}
const onESResume = () => {
log.e(TAG, '-------onESResume---------->>>>>')
if (isPaused) {
playerManager.value?.resume()
}
isPaused = false
}
const onESPause = () => {
log.e(TAG, '-------onESPause---------->>>>>')
isPaused = true
stop()
}
const onESDestroy = () => {
log.e(TAG, '-------onESDestroy---------->>>>>')
playerManager.value?.release()
}
return {
duration,
progress,
playingMediaItemIndex,
playingMediaItem,
playingMediaSourceIndex,
playingMediaSource,
playPreviousMedia,
playNextMedia,
playPreviousMediaSource,
playNextMediaSource,
onESCreate,
onESResume,
onESPause,
onESDestroy,
playerListRef,
playerManager,
onPlayerPlayMedia,
onPlayerPlayMediaSource,
onPlayerPlaying,
start,
pause,
resume,
stop,
}
},
})
</script>
<style>
.es-video-player-manager-page-css {
position: absolute;
}
.es-player-manager-text-css {
color: white;
font-size: 30px;
margin-left: 20px;
margin-right: 20px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
</style>