IT俱乐部 JavaScript Vue实现视频播放vue-video-player、dplayer方式

Vue实现视频播放vue-video-player、dplayer方式

发布: 2025年 5月 12日 104阅读

一、vue-video-player

1、安装及引入

1
2
// 安装
npm install vue-video-player@5.0.1 --save
1
2
3
4
5
6
// 在main.js中全局引入
import VideoPlayer from 'vue-video-player/src';
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
 
Vue.use(VideoPlayer)

2、一些常见的属性、方法和事件

属性：

  • videoWidth：返回音频/视频源文件本身的宽度。
  • videoHeight：返回音频/视频源文件本身的高度。
  • audioTracks：返回表示可用音频轨道的 AudioTrackList 对象。
  • autoplay：设置或返回是否在加载完成后随即播放音频/视频。
  • buffered：返回表示音频/视频已缓冲部分的 TimeRanges 对象。
  • controller：返回表示音频/视频当前媒体控制器的 MediaController 对象。
  • controls：设置或返回音频/视频是否显示控件（比如播放/暂停等）。
  • crossOrigin：设置或返回音频/视频的 CORS 设置。
  • currentSrc：返回当前音频/视频的URL。
  • currentTime：设置或返回音频/视频中的当前播放位置（以秒计）。
  • defaultMuted：设置或返回音频/视频默认是否静音。
  • defaultPlaybackRate：设置或返回音频/视频的默认播放速度。
  • duration：返回当前音频/视频的长度（以秒计）。
  • ended：返回音频/视频的播放是否已结束。
  • error：返回表示音频/视频错误状态的 MediaError 对象。
  • loop：设置或返回音频/视频是否应在结束时重新播放。
  • mediaGroup：设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。
  • muted：设置或返回音频/视频是否静音。
  • networkState：返回音频/视频的当前网络状态。
  • paused：设置或返回音频/视频是否暂停。
  • playbackRate：设置或返回音频/视频播放的速度。
  • played：返回表示音频/视频已播放部分的 TimeRanges 对象。
  • preload：设置或返回音频/视频是否应该在页面加载后进行加载。
  • readyState：返回音频/视频当前的就绪状态。
  • seekable：返回表示音频/视频可寻址部分的 TimeRanges 对象。
  • seeking：返回用户是否正在音频/视频中进行查找。
  • src：设置或返回音频/视频元素的当前来源。
  • startDate：返回表示当前时间偏移的 Date 对象。
  • textTracks：返回表示可用文本轨道的 TextTrackList对象。
  • videoTracks：返回表示可用视频轨道的 VideoTrackList 对象。
  • volume：设置或返回音频/视频的音量。

方法

  • addTextTrack()：向音频/视频添加新的文本轨道。
  • canPlayType()：检测浏览器是否能播放指定的音频/视频类型。
  • load()：重新加载音频/视频元素。
  • play()：开始播放音频/视频。
  • pause()：暂停当前播放的音频/视频。

事件

  • abort：当音频/视频的加载已放弃时触发。
  • canplay：当浏览器可以开始播放音频/视频时触发。
  • canplaythrough：当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
  • durationchange：当音频/视频的时长已更改时触发。
  • emptied：当目前的播放列表为空时触发。
  • ended：当目前的播放列表已结束时触发。
  • error：当在音频/视频加载期间发生错误时触发。
  • loadeddata：当浏览器已加载音频/视频的当前帧时触发。
  • loadedmetadata：当浏览器已加载音频/视频的元数据时触发。
  • loadstart：当浏览器开始查找音频/视频时触发。
  • pause：当音频/视频已暂停时触发。
  • play：当音频/视频已开始或不再暂停时触发。
  • playing：当音频/视频在因缓冲而暂停或停止后已就绪时触发。
  • progress：当浏览器正在下载音频/视频时触发。
  • ratechange：当音频/视频的播放速度已更改时触发。
  • seeked：当用户已移动/跳跃到音频/视频中的新位置时触发。
  • seeking：当用户开始移动/跳跃到音频/视频中的新位置时触发。
  • stalled：当浏览器尝试获取媒体数据，但数据不可用时触发。
  • suspend：当浏览器刻意不获取媒体数据时触发。
  • timeupdate：当目前的播放位置已更改时触发。
  • volumechange：当音量已更改时触发。
  • waiting：当视频由于需要缓冲下一帧而停止时触发。

3、关于不可快进、定位到上次播放位置的基本使用

完整代码如下：

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
<div class="player">
     
</div>
 
export default {
  props: {
    path: {  // 传入的地址
      type: String,
      default: "",
    },
    lastTime: {  // 传入的上次播放位置
      type: Number,
      default: 0,
    },
  },
  components: {},
  data() {
    return {
      playedTime: this.lastTime,
      currentTime: 0,
      maxTime: 0,
      playOptions: {
        height: "200px",
        width: "100%",
        playbackRates: [1.0], // 可选的播放速度
        autoplay: true, // 如果为true,浏览器准备好时开始回放
        muted: false, // 默认情况下静音播放
        loop: false, // 是否视频一结束就重新开始
        preload: "auto", // 建议浏览器在<video data-origwidth="0" data-origheight="0" style="width: 1264px;">加载元素后是否应该开始下载视频数据，auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小，换句话说，它将按比例缩放以适应其容器
        sources: [
          {
            type: "video/mp4", // 类型
            src: require("./1.mp4"), // url地址，在使用本地的资源时，需要用require()引入，否则控制台会报错
          },
        ],
        poster: "./gcy-logo-200.png", // 设置封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息
        controlBar: {
          currentTimeDisplay: true,
          progressControl: true,  // 是否显示进度条
          playbackRateMenuButton: true, // 是否显示调整播放倍速按钮
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
    };
  },
  computed: {
  },
  mounted() {
    this.getData()  // 调用获取地址的接口，然后修改播放器配置中的src属性
  },
  methods: {
    // 准备好了
    onPlayerReady() {
      console.log("准备好了");
    },
    // 视频播放
    onPlayerPlay(player) {
      console.log('播放了');
      console.log(player);
      let playTime = 0;
        if (
          Number(Math.floor(this.playedTime)) ===
          Number(Math.floor(player.duration()))
        ) {
          this.playedTime = 0;
          playTime = 0;
        } else if (
          Number(Math.floor(player.currentTime())) !==
          Number(Math.floor(this.playedTime))
        ) {
          playTime = this.playedTime;
          player.currentTime(playTime)
        }
    },
    // 视频暂停的
    onPlayerPause(player) {
      console.log('暂停中');
      console.log(player);
      this.playedTime = player.currentTime();
    },
    // 视频播放完
    onPlayerEnd(player) {
      console.log('播放结束了');
      console.log(player);
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting(player) {
      console.log("播放停止中");
      console.log(player);
    },
    // 视频已开始播放
    onPlayerPlaying(player) {
      console.log("开始播放了");
      console.log(player);
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata(player) {
      console.log("开始下载数据");
      console.log(player);
    },
    // 当前播放位置发生变化时触发
    onPlayerTimeupdate(player) {
      console.log("播放位置变化了");
      console.log(player);
      let timeDisplay = player.currentTime();
        if (timeDisplay - this.currentTime > 1) {
            player.currentTime(this.currentTime > this.maxTime ? this.currentTime : this.maxTime);
        }
        this.currentTime = player.currentTime();
        this.maxTime = this.currentTime > this.maxTime ? this.currentTime : this.maxTime;
    },
    //播放状态改变
    playerStateChanged(playerCurrentState) {
      console.log("播放状态变化了");
      console.log(playerCurrentState);
    },
    // 手动暂停视频的播放
    pause() {
      // 视频播放器的方法调用，要使用this.$refs.videoPlayer.player这个对象去调用
      this.$refs.videoPlayer.player.pause()
    }
  },
};
 
</video>

注意：

vue-video-player 是基于 video.js 实现的，所以 api 地址：Video.js API docs

调用的时候使用这个对象进行操作：this.$refs.videoPlayer.player

二、dplayer

1、安装

1
2
// 安装
npm install dplayer --save

2、关于不可快进、定位到上次播放位置的基本使用

完整代码如下：

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
// 直接在组件中引入
 
// dplayer.vue
 
<div></div>
 
import DPlayer from "dplayer";
 
export default {
  props: {
    flag: {  // 每个dplayer的id不可以重复
      type: String,
      default: "",
    },
    lastTime: {  // 上次播放到的时间
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      dp: null,
      playedTime: this.lastTime,
    };
  },
  mounted() {},
  methods: {
    async init(id) {
      let currentTime = 0;
      let maxTime = 0;
      let res = await api();  // 调用获取视频的地址
      let src = res.data.path;
      this.dp = new DPlayer({
        container: document.getElementById(this.flag),  // 播放器容器元素
        hotkey: true,  // 开启热键，支持快进、快退、音量控制、播放暂停，默认是true
        lang: "zh-cn",  // 可选值：'en'、'zh-cn'、'zh-tw'
        screenshot: false,  // 开启截图，如果开启，视频和视频封面需要允许跨域
        playbackSpeed: [0.75, 1, 1.25, 1.5, 2, 3],  // 可选的视频播放倍速，可以设置自定义的数组
        video: {  // 视频信息，更多可以参考官网：https://dplayer.diygod.dev/zh/guide.html
          url: src,  // 视频地址
        },
      });
      // 监听视频开始播放
      this.dp.on("play", () => {
        let playTime = 0;
        if (
          Number(Math.floor(this.playedTime)) ===
          Number(Math.floor(this.dp.video.duration))
        ) {
          this.playedTime = 0;
          playTime = 0;
        } else if (
          Number(Math.floor(this.dp.video.currentTime)) !==
          Number(Math.floor(this.playedTime))
        ) {
          playTime = this.playedTime;
          this.dp.seek(playTime);
        }
      });
      // 监听视频暂停
      this.dp.on("pause", () => {
        this.playedTime = this.dp.video.currentTime;
      });
      // 设置不可以快进（timeupdate：当前播放位置更改时触发）
      this.dp.on("timeupdate", () => {
        let timeDisplay = this.dp.video.currentTime;
        if (timeDisplay - currentTime > 1) {
          this.dp.video.currentTime =
            currentTime > maxTime ? currentTime : maxTime;
          this.dp.notice("禁止快进", 2000);
        }
        currentTime = this.dp.video.currentTime;
        maxTime = currentTime > maxTime ? currentTime : maxTime;
      });
      // 快进的提示，在禁止快进的提醒存在时不显示
      this.dp.on("notice_show", function (e) {
        var text = e.innerHTML;
        if (
          "禁止快进" != text &&
          (text.indexOf("快进") > -1 || text.indexOf("快退") > -1)
        ) {
          e.style.display = "none";
        }
      });
    },
  },
};

想要了解更多的功能可以参考dplayer的官网：DPlayer

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/15179.html
60赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部