使用videojs和videosjs-vr实现全景视频的播放以及手机陀螺仪和视角回正

爱喝牛奶的倩

已于 2024-08-14 17:16:54 修改

阅读量2.5k

点赞数 4

文章标签： vr

于 2022-10-28 16:08:17 首次发布

本文链接：https://blog.csdn.net/m0_66911948/article/details/127557144

版权

本文介绍了如何利用videojs和videojs-vr插件在公司项目中实现全景视频播放功能。通过html和js代码展示了具体的实现方式，并详细讲述了如何解决陀螺仪开关问题，通过操作video.vr().controls3d.orientation属性成功实现了手机陀螺仪的开启和关闭，以及视角回正功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言：

刚去一家新公司，公司要求使用videojs和videojs-vr实现播放全景视频的功能，videojs是一个播放普通视频的插件，videojs-vr也是一个插件，它的作用是让videojs可以播放全景视频。

二、先放代码：

html部分：

<template>
  <!-- 播放器 -->
  <div id="videoplayer">
    // id必须有！！！ controls控制播放器按钮显隐
    <video id="videojs-vr-player" class="video-js vjs-default-skin" controls>
      // 全景视频路径
      <source src="@\assets\pchshpt4kh5.mp4" type="video/mp4" />
    </video>
  </div>
  <!-- 刷新和陀螺仪 -->
  <div class="reset_gyroscope">
    // 控制陀螺仪开启和关闭，手机端有效
    <img
      src="static/陀螺仪.png"
      style="width: 2.5rem"
      v-show="!showGyroscope"
      @click="openGyroscope"
    />
    // 控制陀螺仪开启和关闭，手机端有效
    <img
      src="static/陀螺仪-选