video.js自定义预览组件-旋转、下载、画中画、放大缩小功能_video.js操作栏下载功能

使用video.js实现视频播放功能

效果图 - 这里以弹窗展示为例

注意：记得安装video.js插件！！！

代码

父级使用：

videoPreview.vue文件

<!-- 视频预览组件 -->
<template>
  <el-dialog
    id="previewFileDialog"
    title="预览"
    :visible.sync="baseDialogVisible"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :class="isFull ? 'video-preview-dialog-isFull' : 'video-preview-dialog'"
  >
      <videoJs
        :options="videoOptions"
        class="video-box"
        @isFullscreen="isFullscreen"/>
  </el-dialog>
</template>

<script>
import 'video.js/dist/video-js.css';
import videoJs from "@/components/videoPreview/videoJs";

export default {
  name: "index",
  components: {
    videoJs
  },
  props: {
    viewFileUrl: { // 视频url
      type: String,
      default:''
    },
    dialogVisible:{
      type: Boolean,
      default:false
    },
    width: { // 视频宽
      type: String,
      default:'1240'
    },
    height: { // 视频高
      type: String,
      default:'760'
    },
  },
  data(){
    return{
      isFull: false, // 是否全屏
      videoOptions:{
        controls: true,// 开启交互，即是用户可控。
        muted: true,// 开启视频时是否静音
        autoplay:true, // 自动播放
        language: "zh-CN",
        // fluid: true,// 根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
        reload: "auto",// 重载
        // 其余设置根据需求添加！
        poster: '',// 视频封面
        sources: [// 视频播放源，建议本地
          {
            src: this.viewFileUrl,
            type: "video/mp4"
          }
        ],
        userActions: {
          doubleClick: false, // 限制双击
        }
      }
    }
  },
  computed: {
    baseDialogVisible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val) // visible 改变的时候通知父组件-记得父组件使用:dialogVisible.sync实现
      }
    },
  },
  mounted() {
    this.initWH();
    window.addEventListener('resize', this.calculateDialogTop)
  },

  methods:{
    initWH(){
      let dom = document.querySelector('.video-preview-dialog .el-dialog');
      const pageHeight = window.innerHeight;
      dom.style.width = `${this.width}px`;
      dom.style.height = `${this.height}px`;
      let top = (pageHeight - this.height) / 2;
      dom.style.marginTop = `${top}px`;
    },

    // 监听页面大小变化-更改top
    calculateDialogTop() {
      this.$nextTick(() => {
        let dom = document.querySelector('.video-preview-dialog .el-dialog');
        if (dom) {
          const windowHeight = window.innerHeight;
          const dialogTop = (windowHeight - this.height) / 2;
          const top = dialogTop > 0 ? dialogTop : 0;
          dom.style.marginTop = `${top}px`;
        }
      })
    },

    isFullscreen(state){
      this.isFull = state;
      if(!state){
        this.calculateDialogTop()
      }
    }
  },

  destroyed() {
    window.removeEventListener('resize', this.calculateDialogTop);
  },
}
</script>
<style scoped lang="scss">
.video-preview-dialog{
  ::v-deep .el-dialog{
    border-radius: 4px;
    .el-dialog__header{
      height: 44px;
      padding: 0 20px !important;
      line-height: 44px;
      .el-dialog__headerbtn{
        top: 14px;
        z-index: 9999;
      }
    }
    .el-dialog__body{
      padding: 20px;
      height: calc(100% - 44px);
      width: 100%;
      position: relative;
      .video-box{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      ::v-deep .video-js .vjs-tech{
        width: 100% !important;
        height: calc(100% * (1200 / 767));
      }
    }
  }
}
/* 全屏情况 */
.video-preview-dialog-isFull{
  ::v-deep .el-dialog{
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 4px;
    margin-top: 0 !important;
    .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      padding: 0;
      height: 100vh;
      width: 100vw;
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

VideoJs.js文件

<template>
  <video
    ref="videoPlayer"
    id="myVideoPlayer"
    class="video-js"></video>
</template>

<script>
import videoJs from 'video.js';
import 'video.js/dist/video-js.css';
import video_zhCN from 'video.js/dist/lang/zh-CN.json';

export default {
  name: "VideoJs",
  props: {
    options: {
      type: Object,
      default() {
        return {};
      }
    },
  },
  data() {
    return {
      player: null,
      degree:0,
      isFullscreen:false,
      primitivePW:'', // 初始化父级元素大小
      primitivePH:''
    }
  },
  mounted() {
    this.init();
  },
  methods:{
    // 初始化播放器实例
    init(){
      videoJs.addLanguage('zh-CN', video_zhCN); // 设置为中文
      this.player = videoJs(this.$refs.videoPlayer, this.options, function onPlayerReady() {}) // 挂载到this.player
      this.customizeDom(this.player);
      this.handleFullscreenChange(this.player);
      this.handlePauseChange(this.player);
      let dom = document.querySelector('.video-preview-dialog .el-dialog .el-dialog__body .video-js');
      this.primitivePW = dom.clientWidth;
      this.primitivePH = dom.clientHeight;
    },

    // 监听全屏事件
    handleFullscreenChange(_player){
      _player.on('fullscreenchange', () => {
        if(_player.isFullscreen()) {
          // 进入全屏模式
          this.isFullscreen = true;
          this.changeWH(_player,this.isFullscreen)
        } else {
          // 退出全屏模式
          this.isFullscreen = false;
          this.changeWH(_player,this.isFullscreen)
        }
        this.$emit('isFullscreen',this.isFullscreen);
        this.customizeClose()
      });
    },

    // 控制暂停/播放的大按钮显隐
    handlePauseChange(_player){
      let bigPlayButton = document.getElementsByClassName('vjs-big-play-button')[0];
      bigPlayButton.style.display = 'none'
      _player.on('pause', () => {
        bigPlayButton.style.display = 'block'
      })
      _player.on('play', () => {
        bigPlayButton.style.display = 'none'
      })
    },

    onClose(){
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },

    // 自定义关闭icon的显隐-全屏显示
    customizeClose(type = this.isFullscreen){
      let closeButton = this.player.el_.getElementsByClassName('close-icon')[0]
      closeButton.style.display = type ? 'flex' : 'none';
    },

    // 自定义了播放器的控制栏
    customizeDom(_player){
      let that = this;
      let Button = videoJs.getComponent('Button');
      const Component = videoJs.getComponent("Component");
      const CloseButton = videoJs.getComponent('CloseButton');

      /*
      该类继承自Video.js插件库中的Button类
      子类的构造函数只是简单地调用了父类的构造函数并没有进行其他操作
      */
      class downloadButton extends Button {
        constructor(player, options = {}) {
          super(player, options);
          this.controlText("下载"); // 内容text
        }
        handleClick() { // 下载触发
          let url = _player.options_.sources[0].src;
          that.downloadFile(url)
        }
      }
      class rotationButton extends Button {
        constructor(player, options = {}) {
          super(player, options);
          this.controlText("旋转"); // 内容text
        }
        handleClick() { // 旋转触发
          that.applyRotation(_player)
        }
      }
      CloseButton.prototype.handleClick = () => this.onClose(); // close按钮事件执行
      let closeButton = new CloseButton(this.player);
      this.player.addChild(closeButton); // 添加close按钮
      Component.registerComponent("downloadButton", downloadButton); // 注册为Component.registerComponent方法的组件
      Component.registerComponent("rotationButton", rotationButton);
      let downloadDom = that.player.getChild('controlBar').addChild('downloadButton', {}, 17); // 组件的实例-向控制栏添加下载按钮
      let rotationDom = that.player.getChild('controlBar').addChild('rotationButton', {}, 17); // 组件的实例-向控制栏添加旋转按钮
      downloadDom.addClass("download-icon"); // 添加class
      rotationDom.addClass("rotation-icon");
      closeButton.addClass("close-icon");
    },

    // 动态改变视频的宽高
    changeWH(_player,isFullscreen = this.isFullscreen){
      // 获取视频元素和父级容器元素
      let video = _player.el_.getElementsByTagName('video')[0];
      let container = _player.el_;

      // 获取父容器的宽高
      const containerWidth = !isFullscreen ? this.primitivePW : container.offsetWidth;
      const containerHeight = !isFullscreen ? this.primitivePH : container.offsetHeight;

      // 获取视频原始的宽高
      const videoWidth = video.videoWidth;
      const videoHeight = video.videoHeight;

      // 计算视频旋转后的宽高
      const angle = (this.degree || 0) * Math.PI / 180;
      const rotatedWidth = Math.abs(Math.cos(angle) * videoWidth) + Math.abs(Math.sin(angle) * videoHeight);
      const rotatedHeight = Math.abs(Math.sin(angle) * videoWidth) + Math.abs(Math.cos(angle) * videoHeight);

      // 根据父容器的宽高和视频旋转后的宽高计算缩放比例
      const scaleX = containerWidth / rotatedWidth;
      const scaleY = containerHeight / rotatedHeight;
      const scale = Math.min(scaleX, scaleY);

      // 设置视频元素的宽高
      let wd = rotatedWidth * scale;
      let hg = rotatedHeight * scale;

      let resWidth,resHeight;
      if(this.degree == 90 || this.degree == 270){
        let d = Math.max(wd, hg);
        resHeight = resWidth = d;
      }else{
        resHeight = hg;
        resWidth = wd;
      }
      video.style.width = `${resWidth}px`;
      video.style.height = `${resHeight}px`;
      video.style.left = `${(containerWidth - resWidth) / 2}px`;
      video.style.top = `${(containerHeight - resHeight) / 2}px`;
    },

    // 旋转事件
    applyRotation(_player) {
      this.degree = this.degree === 360 ? 90 : this.degree + 90
      let videoElement = _player.el_.getElementsByTagName('video')[0]; // 视频元素
      videoElement.style.transform = `rotate(${this.degree}deg)`;
      this.changeWH(_player)
    },

    // 下载
    downloadFile(url) {
      // const segments = url.split('/');
      // const lastSegment = segments.pop();
      // const link = document.createElement('a');
      // link.href = url;
      // link.download = lastSegment;
      // document.body.appendChild(link);
      // link.click();
      // document.body.removeChild(link);
      fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = '';
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        link.remove();
      }).catch(() => {
        alert('下载文件失败');
      });
    }
  },

  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .download-icon {
  cursor: pointer;
  height: 28px;
  background: url('~@/assets/download.png') center no-repeat;
  background-size: 18px;
}
::v-deep .rotation-icon{
  cursor: pointer;
  height: 28px;
  background: url('~@/assets/order/rotation.png') center no-repeat;
  background-size: 18px;
}
::v-deep .close-icon{
  background: url('~@/assets/order/video-close.png') center no-repeat;
  background-size: 36px;
  height: 36px !important;
  display: none;
  right: 60px !important;
  top: 60px !important;
}
::v-deep .vjs-close-button .vjs-icon-placeholder::before {
  content: none !important;
}
/* 更改全屏按钮大小 */
::v-deep .vjs-fullscreen-control .vjs-icon-placeholder:before {
  font-size: 2.1em;
  line-height: 1.5em;
}
</style>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249

到这里就完啦！！！后面如果接触到新需求有优化会持续更新哒
提醒自己：这是有段时间之前的代码逻辑了，或许明天的你就有不一样的想法呢！所以仅供参考