thplayer v1.2.8

THPlayer.js 播放器ui组件

Demo

使用说明

安装

npm安装：npm install --save thplayer

原生组件

Attributes:

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>