TCPlayerLite使用（腾讯云播放器）

先引入npm

npm install v-tcplayer

页面引入组件

import { VTcPlayer } from ‘v-tcplayer’

使用demo

<template>
  <div id="demo">
    <div>
      <VTcPlayer
        ref="tcPlayer"
        :options="options"
        elmId="1"
        @load="onLoad"
        @play="onPlay"
        @pause="onPause"
      />
      <div @click="play">开始播放</div>
    </div>
  </div>
</template>

<script>
import { VTcPlayer } from 'v-tcplayer'
export default {
  data() {
    return {
      // 视频地址存放对象
      options: {
        // 播放流
        m3u8: 'http://playtest.starfirelink.com/live/user_stream_001.m3u8', 
        // 0.0.5增加
        hlsUrl: 'https://lib.baomitu.com/hls.js/0.8.9/hls.min.js',
        //播放器宽度
        width: '800', 
        //播放器高度
        height: '100%', 
        // poster 支持传入一个对象，在对象中可以对封面的展现样式（style）和图片地址（src）进行设置。
        // style 支持的样式如下：
        // 	default：居中并且以图片的实际分辨率进行显示。
        // 	stretch：拉伸铺满播放器区域，图片可能会变形。
        // 	cover：优先横向等比拉伸铺满播放器区域，图片某些部分可能无法显示在区域内。 
        poster: {
        	"style":"stretch", 
        	"src":"https://img1.baidu.com/it/u=1576882006,3058438369&fm=26&fmt=auto&gp=0.jpg"
        },
        // 是否自动播放
        // iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        autoplay: true, 
        // 设置视频是否为直播类型，将决定是否渲染时间轴等控件，以及区分点直播的处理逻辑。
        // 默认为 false
        live: true,
        // 事件监听回调函数
        listener:()=>{
        	//进行事件处理
        }
      }
    }
  },
  components: {
    VTcPlayer
  },
  computed: {
    player() {
      // tcPlayer实例
      return this.$refs.tcPlayer.vTcPlayer
    },
  },
  methods: {
  	// 开启播放
  	play() {
      this.player.play()
    },
    // time 是 Number
    // time未传参数：获取当前播放时间 计算单位秒
    // time传参数：当设置该属性时，播放会跳跃到指定的位置 列：1 = 1秒
    getCurrentTime(time) {
      return this.player.currentTime(time)
    },
    // 视频加载时触发
    onLoad() {},
    // 视频点击播放时触发
    onPlay() {},
    // 视频点击暂停时触发
    onPause() {},
    // 更换视频资源
    loadNewVideo(url) {
      this.player.load(url)
    },
  }
}
</script>

参数说明

options可传入TcPlayer所有参数，事件监听参数listener推荐不传，通过@event方式绑定。 若页面内有多个视频，需传参数elmId

说明

腾讯CDN不知道什么情况下引入的hls文件有问题，会先引入一个较短的js文件，然后再引入真正的hls文件，导致视频加载失败，0.0.5修改了TcPlayer源码，增加了hlsUrl选项