THPlayer.js 播放器ui组件

Demo

使用说明

安装

npm安装：npm install --save thplayer

原生组件

Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必填 | | --------------- | ------------------------------ | ------- | ----------------------- | ------- | --- | | src | 视频播放地址 | String | - | - | 是 | | title | 视频标题 | String | - | - | 否 | | loop | 是否循环播放 | Boolean | - | false | 否|
| muted | 是否静音 | Boolean | - | false | 否 | | autoplay | 是否自动播放 | Boolean | - | false | 否 | | playbackRate | 倍速播放 | Number | 0.5, 0.75, 1, 1.25, 1.5 | 1 | 否 | | currentTime | 当前播放时长 | Number | - | 0 | 否 | | backgroundColor | 播放器背景颜色 | String | - | #000000 | 否 | | showLoaderDelay | loader加载器出现的延时时间 | Number | - | 500 | 否 | | themeColor | 主题颜色 | String | - | #3F85FF | 否 | | volume | 音量，muted为true时，volume为0 | Number | - | 1 | 否 | | poster | 视频封面图 | String | - | - | 否 | | preload | 是否预加载 | Boolean | true/false | - | 否 | | controlSize | 控件尺寸(不填时，尺寸自适应) | Number | - | 100 | 否 |

Example with options:

var player = new ThPlayer('.player_container', {
   src: 'http://web.trshz.com:10002/THPlayer/static/demo.mp4',
   volume: 0.1,
   currentTime: 0,
   playbackRate: 1,
   loop:true,
   preload:'auto',
   autoplay: false,
   muted: false,
   showLoaderDelay: 500, // 显示Loader的延迟时间
   backgroundColor: '#000000',
   themeColor: '#3F85FF',
   title:'THPlyaer播放器，一个播放器的ui控件，由拓尔思杭州前端团队开发'
   controlSize:100, // 基准值为100，不填时自适应
   poster: 'http://web.trshz.com:10002/THPlayer/static/poster.png'
  });

Event:

helpCallback: 点击帮助按钮时触发 , 不传该参数不显示“帮助”按钮 nextVideoCallback: 点击播放下一个视频 ，不传该参数不显示“下一个”按钮 playMenuCallback:点击打开视频列表，不传该参数不显示“视频列表”按钮

Example use of events:

var player = new ThPlayer('.player_container', {
   helpCallback:function(e) {
    //alert('帮助弹窗定制处'); 
    //业务代码
   },
   nextVideoCallback:function() {
    //alert('切换到下一个视频地址'); 
    //业务代码
   },
   playMenuCallback:function() {
   // alert('打开视频列表菜单');
   //业务代码
   }
  });

vue3x组件：

安装：npm install --save thplayer

引用方式： import thplayer from 'thplayer/dist/ThPlayer.vue3'

usage Example:

<thplayer :options="options"></thplayer>
<script>
import { defineComponent,ref } from "vue";
import thplayer from "thplayer/dist/ThPlayer.vue3";
export default defineComponent({
  setup() {
    const options = ref({
      src: "http://web.trshz.com:10002/THPlayer/static/demo.mp4",
      volume: 0.1,
      title: "THPlyaer播放器，一个播放器的ui控件，由拓尔思杭州前端团队开发",
      currentTime: 0,
      playbackRate: 1,
      loop: true,
      preload: "auto",
      autoplay: false,
      muted: false,
      showLoaderDelay: 500, // 显示Loader的延迟时间
      backgroundColor: '#000000',
      themeColor: "#3F85FF",
      controlSize:100, // 基准值为100，不填时自适应
      poster: 'http://web.trshz.com:10002/THPlayer/static/poster.png'
      helpCallback: function (e) {
        //
      },
      nextVideoCallback: function () {
        //
      },
      playMenuCallback: function () {
        //
      },
    });
    return {
      options;
    };
  },
})
</script>

vue2x组件：

安装：npm install --save thplayer

引用方式： import thplayer from 'thplayer/dist/ThPlayer.vue'

usage Example:

<thplayer :options="options"></thplayer>
<script>
//导入组件
import thplayer from "thplayer/dist/ThPlayer.vue";
export default {
    //注册组件
  components: {
    thplayer,
  },
  data() {
    return {
      options: {
        src: "http://web.trshz.com:10002/THPlayer/static/demo.mp4",
        volume: 0.1,
        title: "THPlyaer播放器，一个播放器的ui控件，由拓尔思杭州前端团队开发",
        currentTime: 0,
        playbackRate: 1,
        loop: true,
        preload: "auto",
        autoplay: false,
        muted: false,
        showLoaderDelay: 500, // 显示Loader的延迟时间
        backgroundColor: '#000000',
        themeColor: "#3F85FF",
        controlSize:100, // 基准值为100，不填时自适应
        poster: 'http://web.trshz.com:10002/THPlayer/static/poster.png'
        helpCallback: function (e) {
          //
        },
        nextVideoCallback: function () {
          //
        },
        playMenuCallback: function () {
          //
        },
      },
    };
  }
};
</script>