npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-videoer

v0.0.9

Published

一个基于react的流媒体播放器

Downloads

11

Readme

属性/配置项

如下属性来自option属性配置项.

| 参数 | 说明 | 类型 | 默认值 | | --------------------- | ----------------------------------------- | ------------------------------------------------------------ | ------------- | | videoSrc | 视频地址(必传) | string | 必传 | | mode | 视频缩放模式 | scaleToFill(不保持纵横比缩放) widthFix(宽度固定,高度自动变化,保持原视频宽高比不变) heightFix(高度固定,宽度自动变化,保持原视频宽高比不变-) | scaleToFill | | height | 视频容器的 height | number | - | | width | 视频容器的 width | number | - | | autoPlay | 自动播放 | boolean | false | | theme | 主题 | string | #ffb821 | | poster | 视频封面图 | string | - | | setEndPlayContent | 自定义视频结束时显示的内容 | React.ReactNode | - | | setBufferContent | 自定义视频缓冲加载组件 | React.ReactNode | - | | setPauseButtonContent | 自定义视频暂停键 | React.ReactNode | - | | | | | | | hideMouseTime | 多少毫秒,无任何操作,隐藏鼠标和控制器/ms | number | 2000 | | isShowMultiple | 是否显示播放倍数功能 | boolean | true | | | | | | | | | | | | isShowPicture | 是否显示画中画 | boolean | true | | | | | | | | | | | | isShowPauseButton | 是否显示暂停键 | boolean | true | | quality | 视频质量清晰度的选择列表 | qualityAttributes[] | | | | | | | | | | | | | | | | | | | | | | | | | | |

方法

| 名称 | 说明 | 类型 | | ----------- | ------------------------ | ----------------------- | | load | 重新加载 | () => void | | pause | 暂停 | () => void | | play | 开始播放 | () => void | | setVolume | 设置音量,[0-100] | (par:number ) => void | | seek | 设置指定视频的播放位置/s | (par:number ) => void | | setVideoSrc | 设置播放视频的地址 src | (par:string ) => void |

提示:如上方法要借助ref才能调用,如:xxx.current.load()

| 名称 | 说明 | 类型 | | ------------------- | ------------------------ | ------------------------------------ | | onProgressMouseDown | 滑动条按下不放,拖动回调 | (e: videoAttributes) => void | | onProgressMouseUp | 滑动条按下松开回调 | (e: videoAttributes) => void | | onPlay | 视频开始播放回调 | (e: videoAttributes) => void | | onPause | 视频暂停播放的回调 | (e: videoAttributes) => void | | onTimeChange | 视频在播放,时间变化回调 | (e: videoAttributes) => void | | onEndEd | 视频结束时回调 | (e: videoAttributes) => void | | onvolumechange | 音量改变时的回调 | (e: videoAttributes) => void | | onError | 视频播放失败的回调 | () => void | | onQualityChange | 视频清晰度改变时的回调 | (e:callBackType)=> void |