Thteejs已有场景中使用CSS3DRenderer插入Vue视频操作组件

最新推荐文章于 2025-02-25 18:45:00 发布

今天没有拉屎

最新推荐文章于 2025-02-25 18:45:00 发布

阅读量425

点赞数 9

分类专栏：前端文章标签： vue.js 音视频前端 webgl 3d

本文链接：https://blog.youkuaiyun.com/weixin_49065241/article/details/137859586

版权

1，创建Vue视频组件

<template>
  <div id="surveillance-content">
    <div class="c-title">
      <div class="c-t-content">
        <div style="display:flex;">
          <div class="c-t-name">
            视频监控
          </div>
        </div>
        <div @click.stop="close">
          <img src="../assets/iconfont/guanbi.png" alt="" class="c-t-close">
        </div>
      </div>
    </div>
    <div id="video-player-container">
      <video id="video-player"
             ref="videoPlayer"
             @ready="onPlayerReady"
             controls="true"
             muted>
        <source :src="videoSrc" type="video/mp4">
      </video>
      <div id="container"/>
      <div class="controls">
        <div class="c-t-content-sx">
          <div class="c-t-content-sx-btn">
            上一个
          </div>
          <div class="c-t-content-sx-btn">
            下一个
          </div>
        </div>
        <div class="angle-control">
          <label>角度:</label>
          <input type="range" min="0" max="360" v-model="angle" @input="onAngleChange" />
        </div>
        <div class="angle-control">
          <label>灵敏度:</label>
          <input type="range" min="1" max="10" v-model="sensitivity" />
        </div>
        <div class="angle-control">
          <label>视角