H5视频播放组件（vue）

最新推荐文章于 2025-10-21 18:37:15 发布

原创最新推荐文章于 2025-10-21 18:37:15 发布 · 1.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何创建一个自定义的H5视频播放组件，包括视频播放、暂停、进度拖拽、倍速切换和全屏功能的实现。通过引入组件并设置属性，可以实现视频控件的显示与隐藏，以及丰富的用户体验。此外，还提供了触摸事件来控制视频控制条的显示和隐藏。

H5视频播放组件

预览：
在这里插入图片描述
使用：

<my-tc-player-v1 :options="options"></my-tc-player-v1>

import MyTcPlayerV1 from '@/components/my-tc-player/my-tc-player-v1'
export default {
    components: {
        MyTcPlayerV1
    },
    data() {
    	return {
    		options: {
            	controls: true, //是否显示视频控件
            	width: "100%", //视频宽度
            	height: "200px", //视频高度
            	isAutoPlay: true, //是否自动播放
            	srcActions: [  //视频清晰度选择
              	{
                	text: '标清',
                	src: '标清视频链接',
              	},
              	{
                	text: '高清',
                	src: '高清视频链接',
              	},
              	{
                	default: true,
                	text: '普通',
                	src: '普通视频链接',
              	}
            	],
            	playbackRateActions: [ // 视频倍速选择
              	{
                	text: '×2',
                	value: 2,
              	},
              	{
                	text: '×1.5',
                	value: 1.5,
             	 },
              	{
                	text: '×1.25',
                	value: 1.25,
              	},
              	{
                	default: true,
                	text: '×1',
                	value: 1,
              	}
            	]
          },
    	}
    }
}

控件功能实现：

this.myvideo = document.getElementById("myTcplayer") //视频dom
视频播放与暂停

// 点击播放
    playVid() {
      this.myvideo.play();  //this.myvideo = document.getElementById("myTcplayer")
      var interval = setInterval(() => {
        this.duration = this.myvideo.duration; //获取视频播放总时长
        this.currentTime = this.myvideo.currentTime;  //获取视频当前播放时间，每秒刷新一次
        if(this.duration && this.currentTime === this.duration) {
          // 播放到底时停止运行
          this.isPause = false;
          clearInterval(interval) //清除定时器
          return false
        }
      }, 1000);
      this.isPause = true; //显示暂停icon
    },
// 点击暂停
    pauseVid() {
      this.myvideo.pause();
      this.isPause = false; //显示播放icon
    },

拖拽视频播放进度条

rangeChange() {
    this.myvideo.currentTime = this.currentTime
    this.playVid()
},

切换视频倍速

rateSelect(val) {
    this.myvideo.playbackRate = val.value //默认1倍速时value=1
    this.defaultRate = val
    this.$toast(
      {
        message: '已切换' + val.value + '倍速',
        position: 'top',
      }
    );
},

点击全屏

fullScreen() {
      if (this.myvideo.requestFullscreen) {
        this.myvideo.requestFullscreen();
      } else if (this.myvideo.mozRequestFullScreen) {
        this.myvideo.mozRequestFullScreen();
      } else if (this.myvideo.msRequestFullscreen) {
        this.myvideo.msRequestFullscreen();
      } else if (this.myvideo.oRequestFullscreen) {
        this.myvideo.oRequestFullscreen();
      } else if (this.myvideo.webkitRequestFullscreen) {
        this.myvideo.webkitRequestFullScreen();
      } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementById('myTcplayer');
        var cssText = 'width:100%;height:100%;overflow:hidden;';
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
        document.IsFullScreen = true;
      }
},

点击视频界面时触发（视频控件隐藏与显示）

touchStart() {
      let _this = this
      if(this.myTcplayerControls.style.display === 'none') {
        this.myTcplayerControls.style.display = 'block'
        setTimeout(function(){
          _this.myTcplayerControls.style.display = 'none'
        },7000);
      } else {
        this.myTcplayerControls.style.display = 'none'
      }
    },