vue項(xiàng)目接入?？低旽5player.js

1. 插件下載
   點(diǎn)擊跳轉(zhuǎn)?？低旽5player下載地址
2. 首先我們需要將下載下來的程序包內(nèi)的JS文件放到我們自己的項(xiàng)目文件
   
   

在utils里面還要放置h5player.min.js文件進(jìn)去 下方代碼中解釋

注意：一定要放在vue中的public文件夾中 否則會(huì)報(bào)錯(cuò)

3. 在public/index.html文件中引入

<script src="./h5player.min.js"></script>
<script src="./Decoder.js"></script>

4. 在頁面中使用

 <div id="HKVideo" class="HKVideo1" ></div>

//下方為海康視頻播放器所需變量
const oPlugin = ref();
const time = ref<number>(0);
async function getScript() {
  const { JSPlugin }: any = window;
  oPlugin.value = new JSPlugin({
    szId: "HKVideo", // 當(dāng)前的視頻播放的節(jié)點(diǎn)，需要英文字母開頭，必填
    szBasePath: "../../utils/", // 這里必須指向h5player.min.js文件 把這個(gè)文件再放在src里面的一個(gè)文件夾中，因?yàn)榉胖迷趐ublic的文件這里指向不到
    openDebug: true,
    // 分屏播放
    iMaxSplit: 4,
    iCurrentSplit: 1,
    // 設(shè)置樣式
    oStyle: {
      border: "#FFF",
      borderSelect: "#FFCC00",
      background: "#000",
    },
  });

  await initPlugin();
}
// 事件初始化
function initPlugin() {
  oPlugin.value.JS_SetWindowControlCallback({
    windowEventSelect(iWindIndex: any) {
      // 插件選中窗口回調(diào)
      console.log("windowSelect callback: ", iWindIndex);
    },
    pluginErrorHandler(iWindIndex: any, iErrorCode: any, oError: any) {
      // 插件錯(cuò)誤回調(diào)
      console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError);
    },
    windowEventOver(iWindIndex: any) {
      // 鼠標(biāo)移過回調(diào)
      console.log("鼠標(biāo)移過回調(diào)", iWindIndex);
    },
    windowEventOut(iWindIndex: any) {
      // 鼠標(biāo)移出回調(diào)
      console.log("鼠標(biāo)移出回調(diào)", iWindIndex);
    },
    windowFullCcreenChange(bFull: any) {
      // 全屏切換回調(diào)
      console.log("全屏切換回調(diào)", bFull);
    },
    firstFrameDisplay(iWndIndex: any, iWidth: any, iHeight: any) {
      // 首幀顯示回調(diào)
      console.log("首幀顯示回調(diào)", iWndIndex, iWidth, iHeight);
    },
    performanceLack(iWndIndex: any) {
      // 性能不足回調(diào)
      console.log("性能不足回調(diào)", iWndIndex);
    },
  });
  realplay();
}
//   // 播放初始化
function realplay() {
  console.log("播放初始化");
  console.log(
    oPlugin.value.currentWindowIndex,
    "oPlugin.value.currentWindowIndex"
  );
  oPlugin.value
    .JS_Play(
      props.obj.videoUrl,//視頻地址鏈接
      {
        playURL: props.obj.videoUrl, // 流媒體播放時(shí)必傳
      },
      oPlugin.value.currentWindowIndex//這個(gè)應(yīng)該是視頻下標(biāo)吧 具體我也不太清楚
    )
    .then(
      (res: any) => {
        console.log(res, "播放成功");
      },
      (err: any) => {
        console.log(err, "播放失敗");
      }
    );
}

onMounted(async () => {
    time.value = setInterval(() => {
      const { _malloc }: any = window;
      if (_malloc) {
        getScript();
        clearInterval(time.value);
      }
    }, 100);
});

這樣就OK啦！

文章來源地址http://www.zghlxwxcb.cn/news/detail-517002.html

到了這里，關(guān)于vue項(xiàng)目接入海康威視H5player.js的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！