VUE——nuxt.js实现腾讯云点播的视频播放

Funkingka

于 2020-03-03 15:07:48 发布

阅读量1.7k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_40677985/article/details/104632131

版权

本文介绍了如何在Nuxt.js项目中封装并使用腾讯云点播的TencentPlayer播放器。首先，通过创建一个Vue组件对播放器SDK进行封装以适应Vue应用。接着，解决在Nuxt服务端渲染环境下因引用tcplayer.min.js导致的错误，将其作为插件引入，并设置ssr: false。最后，展示了在页面中如何传入参数实现视频播放，并给出了最终的播放效果。

摘要由CSDN通过智能技术生成

一、TencentPlayer播放器的封装

- 由于腾讯云点播的文档提供的播放器sdk的使用方法对于vue并不适用，所以参考官网提供的方法对播放器sdk做一个组件的封装，让vue能方便的使用。

- 新建一个TencentPlayer.vue，作为一个组件引用

// TencentPlayer.vue
<template>
  <video
    :id='tcPlayerId'
    class='tencent-player'
    width='1100'
    preload='auto'
    playsinline
    webkit-playsinline
  ></video>
</template>
<script>
  export default {
    name: 'TencentPlayer',
    data() {
      return {
        tcPlayerId: 'tcPlayer' + Date.now(),
        player: null,
      }
    },
    props: {
      options: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    watch: {
      options: {
        handler(newV, oldV) {
          this.$nextTick(() => {
            this.loadJS();
          });
        },
        immediate: true,
        deep: true,
      },
    },
    methods: {
      onoptio