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