videojs播放hls流

最新推荐文章于 2025-03-25 09:11:25 发布

前端小陈C

最新推荐文章于 2025-03-25 09:11:25 发布

阅读量399

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_34179819/article/details/138266708

版权

本文介绍了如何在Vue应用中使用video.js组件嵌入视频，并实现视频URL的动态更新。通过Vue的ref和watch机制管理视频播放器实例，确保视频加载和控制行为的正确执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="video-container">
    <video ref="videoPlayer" class="video-js">
    </video>
  </div>
</template>
<script setup>
import { nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from "vue"
import videojs from "video.js"
import "video.js/dist/video-js.css"

const props = defineProps({
  videoUrl: { type: String, default: '' },
})
const videoPlayer = ref(null)

let myPlayer = null

const options = ref({
  // poster: "//vjs.zencdn.net/v/oceans.png",
  controls: true,
  sources: [
    {
      src: props.videoUrl,
      // type: 'video/mp4',
      type: 'application/x-mpegURL',
    }
  ],
  controlBar: {
    remainingTimeDisplay: {
      displayNegative: false
    }
  },
  playbackRates: [0.5, 1, 1.5, 2],
  autoplay: "muted",
  // autoDisable: true,
  controls: false
})

onMounted(() => {
  myPlayer = videojs(videoPlayer.value, options.value, () => {
    myPlayer.log("play.....")
  })
  myPlayer.src(props.videoUrl);
  myPlayer.load()
})
watch(
  () => props.videoUrl,
  (val, oldVal) => {
    myPlayer = videojs(videoPlayer.value, options.value, () => {
      myPlayer.log("play.....")
    })
    myPlayer.src(val);
    myPlayer.load()

  }
)
onUnmounted(() => {
  if (myPlayer) {
    myPlayer.dispose()
  }
})


</script>
<style lang="scss" scoped>
.video-container {
  width: 100%;
  height: 100%;

  .video-js {
    width: 100%;
    height: 100%;
  }
}
</style>