Welcome to @tencent/sams-player 👋

video player for samsclub app 这是一个为山姆app项目构建的H5播放器

常用场景说明

• no-control: 无进度条竖版

  <div style={{ height: '100vh' }}>
    <SamsPlayer
      src="https://xxxx.mp4"
      mode="simplify"
      muted
      isWifiStatus={'检测宿主环境'}
      showCenterPlayBtnMode={'ALWAYS'}
      className={styles.normalVideo}
      rightTop

      isShowMuteBtn={false}
    />
  </div>
// .normal-video {
//   width: 50vw;
//   height: 40vh;
// }

• simplify: 简单版本

  <div >
    <SamsPlayer
      src={testVideo}
      width="100%"
      height="auto"
      mode="simplify"
      muted
      isWifiStatus={'检测宿主环境'}
      style={{ objectFit:'contain',visibility:'visible'}}
      isShowMuteBtn={false}
        />
  </div>

• 无进度条横版

  <div >
    <SamsPlayer
      src={testVideo}
      width="100%"
      height="auto"
      muted
      mode="simplify"
    />
  </div>

• waterfall：瀑布流

  <SamsPlayer
    src={testVideo}
    className={styles.videoWrapper}
    mode="waterfall"
    showWrapper={false}
    isInWebview={true}
    poster={undefined}
    // ios与安卓表现不一致 必须设置autoPlay为true，否则video标签无法预触发onCanPlay,onLoadedData等事件
    autoPlay={!!testVideo}
    preload="auto"
    muted
    verticalVideoResize={true}
    controlBarStyle={{
      opacity: false ? TOUCHING_OPACITY : 1
    }}
    isLazyLoad={false}
    wifiAutoPlay={false}
  />
// .video-wrapper {
//   width: 100vw;
//   height: 100vh;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   background-color: black;
// }

属性方法

| 属性 | 描述 | type | 默认 | | ------------------- | ----------------------------------------------------------- | ----------------------- | -------------- | | src | 地址 | string | - | | poster | 封面URL | string | - | | isLazyLoad | 是否开启懒加载 | boolean | - | | mode | 模式:simplify:简单模式; waterfall:瀑布流模式 | string | - | | autoPlay | 是否自动播放 | boolean | - | | rightTop | 定义播放按钮是否在右上角 | boolean | - | | isPause | 是否有暂停按钮 | boolean | - | | isShowControl | 是否显示控制器进度条（原normal模式下显示 ） | boolean | false | | samsPlayBtnIcon | 自定义播放按钮图标 | string | - | | samsMuteIcon、samsUnmuteIcon | 自定义音量按钮图标 | string | - | | samsUnmuteStyle、samsMuteStyle | 自定义音量按钮样式 | string | - | | samsControlStyle | 自定义控制器样式 | string | - | | isShowProgress | 是否显示控制器进度条（原simplify模式下为true） | boolean | false | | isShowMuteBtn | 是否显示独立的控制静音按钮 | boolean | true | | isWifiStatus | 宿主环境是否是wifi环境 | boolean | false |

Install

npm install

Author

👤 alexpbchen

• Website: blog.aplanckfish.xyz
• Github: @APlanckfish

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator