TCPlayerLite使用（腾讯云播放器）-蒲公英云

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>