视频播放器

技术点

播放器事件 拖拽进度条 visibilitychange 事件

注意

该视频播放组件仅为个人学习使用，未经过多浏览器测试，其兼容性也一般，请勿在生产环境中使用。
建议使用成熟的 33.4k star 的视频播放插件 video.js (opens new window)

介绍

在阅读前，请先了解 video 的相关操作 api 文档 (opens new window)

目录结构

└─ src                          
   └─ components                
      └─ Player                     # 播放器组件
        ├─ index.vue                # 播放器
        └─ playerProgress.vue       # 播放器进度条

使用

<player ref="player" show-player />

// 引入组件
import player from "@/components/Player/index";

export default {
    components: {
        player,
    },

    methods: {
        play() {
					// 播放 video 格式有要求
            this.$refs.player.play(this.video);
        },
    },
}

注意点

• 由于浏览器限制，如果用户未主动点击过该网站的视频播放，使用代码主动调用视频的 play 方法进会报异常，无法播放视频；如果将视频静音，则可使用 play 方法播放视频。

async doPlay() {
    this.paused = false;
    try {
        await this.$video.play();
    } catch (error) {
        // 无法调用视频 play 方法时，先让视频静音，再调用播放方法
        this.$video.muted = true;
        this.$video.play();
    }
},

• 当页面切换到后台，如容器 App 返回桌面，来电话中断视频等情况时，需要让视频暂停播放，此时我们可以监听 visibilitychange 实现。该方法用于监听页面的显示与隐藏。

// 使用组件时，监听页面显示与隐藏事件
mounted() {
    document.addEventListener("visibilitychange", this.visibleChangeHandle);
},

// 销毁组件时，移除该事件监听
beforeDestroy() {
  document.removeEventListener("visibilitychange", this.visibleChangeHandle);
},

methods: {
    visibleChangeHandle() {
        // 如果页面隐藏，则暂停播放
        if (document.visibilityState === "hidden") {
            this.paused = true;
            this.$video.pause();
        }
    }
}