vue2 视频播放 vue-video-player_vue2 vue-video-player

安装

vue-video-player vue2版本只支持到5.0.2版本。 vue3 版本的是videojs-player GitHub地址

npm install video.js vue-video-player@5.0.2 --save

引用

// main.js
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer)
1
2
3
4
5
6

组件

<template>
  <div class='videomp4' @dblclick="clickFun()">
    <video-player class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                  @pause="onPlayerPause($event)"
                  @play="onPlayerPlay($event)"
                  @ended="onPlayerEnded($event)"
                  @timeupdate="onPlayerTimeupdate($event)"
                  @dblclick="clickFun()"
                  @canplay="onPlayerCanplay($event)"
                  @fullscreenchange="onPlayerFullscreenChange($event)"
                  @dblclick.middle= "ondbclick($event)"
                  @error.once= "onPlayerError($event)"
    >
    </video-player>
  </div>
</template>

<script>

export default {
  name: "videoPlayerChild",
  props:{
    videoUrl: "",
  },
  data() {
    return {
      poster: '',
      isPlay: false,
      playerOptions: {
        // playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false,  // 如果为true,浏览器准备好时开始回放
        muted: false,     // 默认情况下将会消除任何音频。
        loop: false,      // 是否视频一结束就重新开始。
        playsinline: false,
        progressBar: false,
        preload: 'auto',  // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9',  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true,  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",  // 类型
          src: this.videoUrl // url地址
          // src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D' // url地址
        }],
        poster: '',  // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,           // 当前时间和持续时间的分隔符
          durationDisplay: false,       // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true,       // 是否显示全屏按钮
          currentTimeDisplay: false,   // 当前时间
          playToggle: true,       // 播放按钮
          volumePanel: false       // 静音按钮
        }
      }
    }
  },
  created() {
    // this.onUpdateAspectRatio()
  },
  computed:{
    // player () { return this.$refs.videoPlayer.player },
    playsinline () {
      let ua = navigator.userAgent.toLocaleLowerCase()
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null)
      { return false }
      else {
        // ios端
        return true
      }
    }
  },
  methods: {

//     @ready="playerReadied($event)"添加到组件
//     完了方法:
//         playerReadied(player) {
//   player.requestFullscreen()//调用全屏api方法
// },
    onPlayerTimeupdate(player) {
      // this.onUpdateAspectRatio();
      //判断移动端还是pc端
      if ("cordova" in window) {
        if (player.player_.isFullscreen_ == true) {
          screen.orientation.lock('landscape');
        } else {
          screen.orientation.lock('portrait');
        }
      }
    },

    onPlayerFullscreenChange($event){
      console.log("FullscreenChange")
    },

    /*全屏播放*/
    playfullscreen(){
      // this.$refs.videoPlayer.player.fullscreen()
      this.$refs.videoPlayer.player.requestFullscreen()
    },
    /*退出全屏播放*/
    outfullscreen(){

    },
    onPlayerCanplay (player) {
      var ua = navigator.userAgent.toLocaleLowerCase()
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        $('body').find('video').attr('x-webkit-airplay', true).attr('x5-playsinline', true).attr('webkit-playsinline', true).attr('playsinline', true)
      } else {
        $('body').find('video').attr('webkit-playsinline', 'true').attr('playsinline', 'true')
      }
    },

    onUpdateAspectRatio(){
      const pin = this.$getViewportSize()
      this.playerOptions.aspectRatio =
          pin.width+
          ':' +
          pin.height;
    },
    onPlayerPause($event) {
      // console.log("暂停了.....")
      this.isPlay = false;
    },
    onPlayerPlay($event) {
      // console.log("播放了.....")
      this.isPlay = true;
    },
    onPlayerEnded($event) {},
    // 暂停
    stopVieo(){
      // console.log("暂停视频")
      this.$refs.videoPlayer.player.pause();
      this.isPlay = false;
    },
    onPlayerError(){
      console.log("视频出错")
    },
    ondbclick() {
      this.onPlayerClick()
    },
    onPlayerClick() {
      if (this.isPlay) {
        this.$refs.videoPlayer.player.pause();
        this.isPlay = false;
      } else {
        this.$refs.videoPlayer.player.play();
        this.isPlay = true;
      }
    },

    clickFun(){
      var clickid = 1;
      var timer = null;
      function a() {
        console.log('点击');
      }
      function b() {
        console.log('双击');
      }
      let startTime = new Date().getTime();

      if(clickid === 1) {
        clickid++;
        timer = setTimeout(function () {
          a(); // 单击事件触发
          clickid = 1;
        }, 300)
      }

      if(clickid === 2) {
        clickid ++ ;
      } else {
        var endTime = new Date().getTime();
        if ((endTime - startTime) < 300) {
          b(); // 双击事件
          clickid = 1;
          clearTimeout(timer);
        }
      }
    }
  },

  watch: {
    url(val){
      console.log("视屏地址")
      this.playerOptions.sources[0].src = val;
    }
  }
}
</script>

<style lang="scss" scoped>

.videomp4{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}

/*播放按钮*/
::v-deep .vjs-play-control{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

::v-deep .video-js .vjs-play-control .vjs-icon-placeholder:before{
  order:1;
  position:(static !important);
}

::v-deep .vjs-play-control:focus-visible {
  outline: -webkit-focus-ring-color auto 0px;
}

/* 全屏*/
::v-deep .vjs-fullscreen-control{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

::v-deep .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
  order:1;
  position:(static !important);
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-modal-dialog .vjs-modal-dialog-content{

}

/*进度条圆圈 ● */
//::v-deep .video-js .vjs-play-progress:before{
//  font-size:2.5em;
//}


//::v-deep .vjs-custom-skin > .video-js .vjs-play-progress:before{
//  top: -0.4em;
//}

</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
250
251
252
253
254

使用组件

<!-- 视屏播放 -->
    <el-dialog :visible.sync="videoOpen" >
      <video-player-child :video-url="videoUrl"  ref="dialogVideo" v-if="videoOpen"></video-player-child>
    </el-dialog>
...
import videoPlayerChild from "@/views/components/videoPlayerChild.vue";
...
components: {
    videoPlayerChild
  },
...
 	videoOpen: false,
    videoUrl: "",
...
palyMovies(row){
      this.videoUrl = process.env.VUE_APP_BASE_API + row.movieUrl;
      this.videoOpen=true
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18