使用腾讯提供的TCPlayer 播放器，配合云点播是报的Cannot read properties of null (reading ‘nodeName‘)

报错：

TypeError: Cannot read properties of null (reading 'nodeName')
    at TCPlayer (webpack-internal:///./node_modules/tcplayer.js/dist/tcplayer.v5.0.1.min.js:5:51401)
    at Proxy.initTCPlayer (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/huoxingViews/lubanCraftsmanCity/home.vue?vue&type=script&lang=js:175:79)
    at _callee$ (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/huoxingViews/lubanCraftsmanCity/home.vue?vue&type=script&lang=js:165:22)
    at tryCatch (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:97:17)
    at Generator.eval (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:181:22)
    at Generator.eval [as next] (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js:122:21)
    at asyncGeneratorStep (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:9:24)
    at _next (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:28:9)
    at eval (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:33:7)
    at new Promise (<anonymous>)

解决办法：

这玩意，还是得根据具体情况去具体分析的，这解决办法反正是能解决我的问题。

首先介绍下TCPlayer和vue之间的加载顺序

在 vue 中引入腾讯视频， 原则是 先加载腾讯视频代码 → 加载 dom → 加载视频初始化代码，

之所以报这个错误，我看了看源码是因为，TCPlayer没有拿到我们的video 这个标签元素，再结合vue的特性，那就应该是我们的vue  DOM还没加载完成，TCPlayer 他就去拿了，这就导致报错

然后结合我写的代码，我发现，我对video进行循环了，所以才一直报错，我操，服了

下面是怎么使用TCPlayer在vue中

首先在vue中下载TCPlayer

npm install tcplayer.js

在需要用的到vue文件中引入

import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';

然后写html,注意id，这个很重要，可以自定义命名

<video id="video2" preload="auto"  playsinline webkit-playsinline x5-playsinline></video>

在data中定义一个为null的变量，为了后面存放TCPlayer对象

data() {
    return {
      TCPlayerVideo: null,
    };
  },

在mounted生命周期中初始化TCPlayer--腾讯云播放器

mounted(){
    this.init()
  },

然后是methods方法

    init(){
      this.getDetail();
    },
    async getDetail(){
        this.initTCPlayer();
    },
    initTCPlayer() {
        // 除了appID、licenseUrl必须设置外，其他都是可选参数
        // 这地方的video2 就是我们<video>标签的id，两者必须一致
      this.TCPlayerVideo = TCPlayer("video2", {
          plugins: {
              ProgressMarker: true, //控制进度条显示
              ContextMenu: {
              mirror: true,
              statistic: true,
              },
              DynamicWatermark: {
              speed: 0.2,
              content: " power system ",
              },
          },
          controlBar: {
              QualitySwitcherMenuButton: true,
          },
          appID:'这个需要你去腾讯云中找，，你写上就行，固定死的',
          autoplay: false,
          language: "zh-CN",
          licenseUrl:'这个需要你去腾讯云中买这个服务，人家会给你个licenseUrl，你写上就行，固定死的，也有体验的',
      });
      this.TCPlayerVideo.src(“视频URL”);
    },

页面销毁，同时也销毁video.js对象，在beforeDestroy生命周期中写

beforeDestroy(){
    //页面销毁，同时也销毁video.js对象
    this.TCPlayerVideo.dispose();
  },