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

一、前言：

刚去一家新公司，公司要求使用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/陀螺仪-选中.png"
      style