Taro小程序直播组件(live-player)开发流程以及封装

669 阅读1分钟

1. 准备工作

我们首先需要在微信公众平台接口权限中开启这两个接口权限

1663813231126.png

注意:live-player在微信开发者工具上是用不了的,只有在真机调试上才能看出效果**

Taro live-player 文档:taro-docs.jd.com/taro/docs/c…

2. 直播 live-player(demo)

 <live-player
    mode="live"
    object-fit="fillCrop"
    src="" //直播地址
    autoplay='true' //是否自动播放
 >
 </live-player>

这样最基本的直播就出来了(切记~真机调试)

3. live-player 样式修改

  {/* 横版 */}
  <live-player
    mode="live"
    object-fit="fillCrop"
    src="https://live.youfuyouwu.com/live/live.m3u8?txSecret=ba93ffabf9d9ced452db541d2bc8ec05&txTime=632C5458" //直播地址 
    //(我用的RTMP地址)
    autoplay='true'
    style={{height:SH(500),width:'100%'}} //修改样式
  >
 </live-player>
 {/* 竖版 */}
 <live-player
   mode="live"
   object-fit="fillCrop"
   src="https://live.youfuyouwu.com/live/live.m3u8?txSecret=ba93ffabf9d9ced452db541d2bc8ec05&txTime=632C5458" //直播地址
   //(我用的RTMP地址)
   autoplay='true'
   style={{height:'100vh',width:'100%'}} //修改样式
    >
 </live-player>

后续还会更新