tcplayer-plugin

TcPlayer 播放器组件

基于腾讯云播放器的封装组件，支持Vue2、Vue3和原生JavaScript项目。

特性

• 支持Vue 2.x和Vue 3.x框架
• 支持原生JavaScript使用
• 自动按需加载腾讯云播放器资源
• 支持常见视频格式(mp4, flv, m3u8, webrtc等)
• 完整的TypeScript类型支持
• 支持自定义配置

安装

# npm
npm install tcplayer-plugin --save

# yarn
yarn add tcplayer-plugin

# pnpm
pnpm add tcplayer-plugin

使用方法

Vue 3.x

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import TcPlayer from 'tcplayer-plugin'

const app = createApp(App)
app.use(TcPlayer)
app.mount('#app')

<!-- YourComponent.vue -->
<template>
  <div style="width: 600px; height: 400px;">
    <tc-player :config="playerConfig"></tc-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerConfig: {
        tconfig: {
          m3u8: 'https://你的视频地址.m3u8',
          autoplay: false,
          poster: 'https://你的封面图地址.jpg',
          controls: true
        },
        hearttime: 30000, // 心跳检测时间，单位毫秒
        onready(player) {
          console.log('播放器就绪', player)
        },
        onplay() {
          console.log('开始播放')
        }
      }
    }
  }
}
</script>

Vue 2.x

// main.js
import Vue from 'vue'
import App from './App.vue'
import TcPlayer from 'tcplayer-plugin'

Vue.use(TcPlayer)

new Vue({
  render: h => h(App)
}).$mount('#app')

原生JavaScript

<div id="player-container" style="width: 600px; height: 400px;"></div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/tcplayer-plugin/dist/index.umd.min.js"></script>
<script>
  // 需要先引入Vue
  const playerConfig = {
    tconfig: {
      m3u8: 'https://你的视频地址.m3u8',
      autoplay: false,
      poster: 'https://你的封面图地址.jpg'
    },
    onready: function(player) {
      console.log('播放器就绪', player);
    }
  };
  
  // 创建播放器实例
  const player = new TcPlayer.TcPlayerJS('#player-container', playerConfig);
  
  // 销毁播放器
  // player.destroy();
</script>

配置选项

播放器配置 (config.tconfig)

参数名	类型	默认值	说明
m3u8	String	-	m3u8视频地址
mp4	String	-	mp4视频地址
flv	String	-	flv视频地址
webrtc	String	-	webrtc视频地址
autoplay	Boolean	false	是否自动播放
width	String/Number	'100%'	播放器宽度
height	String/Number	'100%'	播放器高度
controls	Boolean	true	是否显示控制栏
live	Boolean	false	是否为直播模式
poster	String	-	视频封面图
preload	String	'auto'	预加载方式
muted	Boolean	false	是否静音

事件回调

事件名	参数	说明
onready	player	播放器就绪
onerror	player	播放错误
ontimeupdate	duration, currentTime, player	播放进度更新
onpause	player	暂停播放
onplay	player	开始播放
onended	player	播放结束
onnext	player	播放下一个
onpre	player	播放上一个
onwaiting	player	视频缓冲中
onsnapshoted	data, player	截图完成
onheart	player	心跳检测

许可证

MIT