TCPlayerLite使用（腾讯云播放器）

╰+攻爆jí腚メ 2022-09-06 01:27 559阅读 0赞

### 先引入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选项