Nuxt3项目中如何引用dPlayer视频播放插件？

第一步：安装dPlayer依赖包：

npm install dplayer --save

或

yarn add dplayer

2.引用dPlayer:  import DPlayer from 'dplayer'

 3.初始化与设置参数：

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import DPlayer from 'dplayer'

const router = useRouter()
const videoRef = ref(null)
let player = null

const props = defineProps({
  matchInfo: {
    type: Object,
    default: () => ({})
  },
  videoTitle: {
    type: String,
    default: ''
  },
  videoImg: {
    type: String,
    default: '/_nuxt/assets/img/football_field.jpeg'
  },
  videoList: {
    type: Array,
    default: () => []
  },
  playUrl: {
    type: String,
    default: 'http://p.gobf.cc//sports-video/video/video/ed5eee08d8213a52a9c6c35920868067.mp4'
    // type: String,
    // required: true // 设为必传属性

  }
})

watch(() => props.playUrl, (newUrl) => {
  if (newUrl && player) {
    player.switchVideo({
      url: newUrl,
      type: 'auto'
    })
  }
})


onMounted(() => {
  if (!props.playUrl) {
    console.error('Video URL is required')
    return
  }

  // Initialize DPlayer with the provided URL
  player = new DPlayer({
    container: videoRef.value,
    video: {
      url: props.playUrl,
      type: 'auto'
    },
    autoplay: true,
    theme: '#29BCD3',
    lang: 'zh-cn',
    preload: 'auto'
  })

  // Add error handling
  player.on('error', (error) => {
    console.error('DPlayer error:', error)
  })
})

onBeforeUnmount(() => {
  // Clean up player instance
  if (player) {
    player.destroy()
    player = null
  }
})

// Update click handler to use correct video ID
const handleVideoClick = (item) => {
  if (!item?.videoId) {
    console.error('No video ID found:', item)
    return
  }
  

  console.log('Navigating to video:', {
    videoId: item.videoId,
    channelTagId: item.channelTagId || 0
  })

  router.push({
    path: `/hot/video/${item.videoId}`,
    query: { 
      channelTagId: item.channelTagId || 0 
    }
  })
}
</script>