|
|
@@ -126,6 +126,32 @@ let player = null
|
|
|
|
|
|
// 初始化播放器
|
|
|
onMounted(() => {
|
|
|
+ initPlay();
|
|
|
+})
|
|
|
+
|
|
|
+// 监听src变化,更新视频源
|
|
|
+watch(() => props.src, (newSrc, oldSrc) => {
|
|
|
+ console.log('newSrc', newSrc, 'oldSrc', oldSrc)
|
|
|
+ if (player && newSrc !== oldSrc && newSrc !== '') {
|
|
|
+ player.src({ src: newSrc, type: props.type })
|
|
|
+ player.load()
|
|
|
+ if (props.autoplay) {
|
|
|
+ player.play()
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 监听poster变化,更新封面
|
|
|
+watch(() => props.poster, (newPoster) => {
|
|
|
+ if (player) {
|
|
|
+ player.poster(newPoster)
|
|
|
+ }
|
|
|
+})
|
|
|
+const initPlay = ()=>{
|
|
|
+ if (player) {
|
|
|
+ player.dispose()
|
|
|
+ player = null
|
|
|
+ }
|
|
|
// 创建video.js播放器实例
|
|
|
player = videojs(videoElement.value, {
|
|
|
autoplay: props.autoplay,
|
|
|
@@ -134,6 +160,7 @@ onMounted(() => {
|
|
|
preload: props.preload,
|
|
|
aspectRatio: "16:9",
|
|
|
// playbackRates: props.playbackRates,// 播放速度选项
|
|
|
+ sources: [{ src: props.src, type: props.type }], // 添加这行
|
|
|
controlBar: props.controlBar,
|
|
|
})
|
|
|
|
|
|
@@ -145,25 +172,7 @@ onMounted(() => {
|
|
|
player.on('loadedmetadata', () => emit('loadedmetadata', player.duration()))
|
|
|
player.on('error', () => emit('error', player.error()))
|
|
|
player.on('ready', () => emit('ready', player))
|
|
|
-})
|
|
|
-
|
|
|
-// 监听src变化,更新视频源
|
|
|
-watch(() => props.src, (newSrc, oldSrc) => {
|
|
|
- if (player && newSrc !== oldSrc) {
|
|
|
- player.src({ src: newSrc, type: props.type })
|
|
|
- player.load()
|
|
|
- if (props.autoplay) {
|
|
|
- player.play()
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-// 监听poster变化,更新封面
|
|
|
-watch(() => props.poster, (newPoster) => {
|
|
|
- if (player) {
|
|
|
- player.poster(newPoster)
|
|
|
- }
|
|
|
-})
|
|
|
+}
|
|
|
|
|
|
// 组件销毁时清理播放器
|
|
|
onUnmounted(() => {
|
|
|
@@ -198,8 +207,9 @@ defineExpose({
|
|
|
// 获取播放速度
|
|
|
getPlaybackRate: () => player && player.playbackRate(),
|
|
|
// 获取播放器实例(高级用法)
|
|
|
- getPlayerInstance: () => player
|
|
|
-})
|
|
|
+ getPlayerInstance: () => player,
|
|
|
+ initPlay,
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|