Web前端最新vue项目接入海康威视H5player，腾讯前端面试题

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<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", // 当前的视频播放的节点，需要英文字母开头，必填
    szBasePath: "../../utils/", // 这里必须指向h5player.min.js文件 把这个文件再放在src里面的一个文件夹中，因为放置在public的文件这里指向不到
    openDebug: true,
    // 分屏播放
    iMaxSplit: 4,
    iCurrentSplit: 1,
    // 设置样式
    oStyle: {
      border: "#FFF",
      borderSelect: "#FFCC00",
      background: "#000",
    },
  });

  await initPlugin();
}
// 事件初始化
function initPlugin() {
  oPlugin.value.JS\_SetWindowControlCallback({
    windowEventSelect(iWindIndex: any) {
      // 插件选中窗口回调
      console.log("windowSelect callback: ", iWindIndex);
    },
    pluginErrorHandler(iWindIndex: any, iErrorCode: any, oError: any) {
      // 插件错误回调
      console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError);
    },
    windowEventOver(iWindIndex: any) {
      // 鼠标移过回调
      console.log("鼠标移过回调", iWindIndex);
    },
    windowEventOut(iWindIndex: any) {
      // 鼠标移出回调
      console.log("鼠标移出回调", iWindIndex);
    },
    windowFullCcreenChange(bFull: any) {
      // 全屏切换回调
      console.log("全屏切换回调", bFull);
    },
    firstFrameDisplay(iWndIndex: any, iWidth: any, iHeight: any) {
      // 首帧显示回调
      console.log("首帧显示回调", iWndIndex, iWidth, iHeight);
    },
    performanceLack(iWndIndex: any) {
      // 性能不足回调
      console.log("性能不足回调", 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, // 流媒体播放时必传
      },
      oPlugin.value.currentWindowIndex//这个应该是视频下标吧 具体我也不太清楚
    )
    .then(
      (res: any) => {
        console.log(res, "播放成功");
      },


### 最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)

![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)