vue 播放萤石云实景

安装

npm i hls.js

npm i dplayer

引入

import Hls from "hls.js";

import DPlayer from 'dplayer'; 

播放

 <div ref="player"></div>

play() {

      const that = this;

      this.optionsPlayer = new DPlayer({

        container: this.$refs.player, //播放器容器

        autoplay: true,

        mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户

        theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色

        loop: true, // 是否自动循环

        lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'

        screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地

        hotkey: true, // 是否支持热键，调节音量，播放，暂停等

        preload: "auto", // 自动预加载

        volume: 0.7, // 初始化音量

        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度，可自定义

        video: {

          type: "customHls",

          url: url, // 播放视频的路径

          customType: {

            customHls: function (video, player) {

              that.hls?.destroy(); 

              that.hls = new Hls();

              that.hls.loadSource(video.src);

              that.hls.attachMedia(video);

            },

          },

          defaultQuality: 0, // 默认是高清

        },

        contextmenu: [

          //  自定义上下文菜单

          // 右键菜单

          {

            text: "选项二",

            click: (player) => {

              console.log(player);

            },

          },

        ],

        highlight: [

          //进度条上的自定义时间标记

          // 进度条时间点高亮

          {

            text: "10M",

            time: 6,

          },

          {

            text: "20M",

            time: 12,

          },

        ],

      });

}

 销毁

 this.hls?.destroy();

 this.optionsPlayer?.destroy();

 操作（需搭配萤石云后台操作接口）

//direction：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距

需先调用接口获取token