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 🙏

© 2025 – Pkg Stats / Ryan Hefner

unite-video

v0.1.58

Published

播放器

Downloads

137

Readme

混合播放器

  1. 支持h264视频播放
  2. 支持h265视频播放
  3. 支持PPapi插件播放
  4. 支持wasm无插件化播放
  5. 支持多路播放

启动

npm start

编译

  1. es6+ npm run build:pod
  2. es5 npm run build
  3. test npm run build:test
  4. build:pod npm run build:pod //线上版本 经过压缩处理
  5. build:stream npm run build:stream //将插件编译到上层应用目录的public下

API

1、参数配置

| 参数名称 | 必填 | 默认值 | 其他值 | 含义 | | --------------- | ---- | ------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | id | yes | null(string) | | 用于topic注册、消息交互监听等 | | src | yes | null(string) | | 视频流地址,接收flv流 | | title | no | 空字符串(string) | | 视频上方显示title | | width | no | 100%(string) | | 宽度 | | height | no | 100%(string) | | 高度 | | main-style | no | 空字符串(string) | | video样式 | | palymode | no | autoplay(string) | manual | 视频在就绪后是否马上播放。 | | canpaused | no | true | false | 是否有暂停按钮 0.1.30 新增 | | stream | no | live(string) | replay | 是否直播 还是回放 | | play-config | no | JSON.stringify({enableStashBuffer: false}) | 配置 | 播放器播放配置0.1.32 新增 | | encoding | no | h264(string) | h265 | 视频格式类型 | | plugin | no | PPApi(string) | wasm,PPApi,auto | 俩种插件的使用选择如果配置结果为wasm则不能再切换成另一种模式如果配置结果为PPApi则可以切换俩种模式如果配置结果为auto [0.1.32]新增()则根据视频码率自动切换俩种形态 | | multiscreen | no | true(boolean) | false | 是否支持多屏播放 | | max-progressive | no | 1080(number) | | 超过该值 做插件转换[0.1.32] 新增 | | library | no | 空字符串(string) | | 静态资源加载路径,微服务是需要传目前需要加载libqydecoder.wasmlayout.json(支持多屏的配置)文件 | | current-time | no | 当天凌晨12点 | 时间戳 | 默认拖拽起始点 | | toolbars | no | {} | {shutdown: true |false,fullscreen: true |falseothers:{shutdown: true,multiscreen: true,screenshot: true,plugin: true,videoInfo: true}} | 操作列按钮 fullscreen 是否支持全屏shutdown 是否执行关闭当前视频multiscreen 是否支持分屏screenshot 是否支持截图plugin 是否支持切换能力集videoInfo: 是否支持查看视频信息 | | fixed-operation | no | true(boolean) | false | 是否固定操作列 |

2、事件配置

		import UniteVideo from '@sany/uniteVideo';
		/**
         * 注入监听事件
         */
        const Observer = new UniteVideo.Observer('isLive-video');
        /**
         * 监听时间拖拽事件
         */
        const timelineChange = ({data: {type, date}}: any) => {
            if (type === 'current') {
                dispatch({
                    type: EnumVideoState.video,
                    value: {
                        // data 返回为正规时间格式 此处可转换为业务需要的格式
                        startTime: UniteVideo.Utils.fomartTimeToyyyyMMddHHmmss(date), // ,
                        endTime: UniteVideo.Utils.fomartTimeToyyyyMMddHHmmss(AppUtil.timestampToTime(AppUtil.thisDayEarly())),
                    }
                })
            }
        };
        Observer.subscribe('timeline', timelineChange);
		/**
         * 或者点语法监听某一类的的数据 俩种皆可
         */
		Observer.subscribe('timeline.current', timelineChange);

3、Stream获取流信息

/**
 * 获取streamUrl地址
 * {
 *     cameraIp: '',
 *     stream: 'live' | 'replay',
 *     subStream: true, false,
 *     startTime: '',
 *     endTime: ''
 * }
 * @returns {Promise<void>}
 */
new UniteVideo.Stream('http://10.88.1.118:5180').url({cameraIp, stream, subStream, startTime, endTime});
/**
 * 关闭流
 * @param url
 * @returns {Promise<void>}
 */
new UniteVideo.Stream('http://10.88.1.118:5180').shutdown({url});

框架使用

// 如果有h265格式视频 需将@sany/uniteVideo/build/h265.min.js 加入到当前项目中  
// 可通过在index.html中直接<script></script>
// 或者通过其他手段动态导入,例如react-load-script 、@gaopeng123/hoc等

1、react(tsx)中使用

  • import UniteVideo from '@sany/uniteVideo';

const DevicesVideo = (props: any) => {
    /**
     * 公共数据
     */
    const {state, dispatch, height} = props;
    /**
     * 视频参数
     */
    const videoCfg = state[EnumVideoState.video];
    /**
     * 设置url 该url通过tree点击传递过来
     */
    const [url, setUrl] = useState<string>('');

    useEffect(() => {
        /**
         * 注入监听事件
         */
        const Observer = new UniteVideoObserver('isLive-video');
        /**
         * 监听时间拖拽事件
         */
        const timelineChange = ({data: {type, date}}: any) => {
            if (type === 'current') {
                dispatch({
                    type: EnumVideoState.video,
                    value: {
                        startTime: UniteVideo.Utils.fomartTimeToyyyyMMddHHmmss(date), // ,
                        endTime: UniteVideo.Utils.fomartTimeToyyyyMMddHHmmss(AppUtil.timestampToTime(new Date(date).getTime() + 1000 * 60 * 30)),
                    }
                })
            }
        };
        Observer.subscribe('timeline', timelineChange);
        /**
         * 监听分屏触发事件
         * @param type
         * @param value
         */
        const splitScreenChange = ({data: {type, value}}: any) => {
            if (type === 'stream') {
                dispatch({
                    type: EnumVideoState.video,
                    value: {
                        subStream: value === 'subStream'
                    }
                })
            }
        };

        /**
         * 可用点语法监听某一类的的数据
         */
        Observer.subscribe('splitScreen.stream', splitScreenChange);

        return () => {
            Observer.unsubscribe('timeline', timelineChange);
            Observer.unsubscribe('splitScreen', splitScreenChange)
        }

    }, []);

    /**
     * url变更后 执行视频的更新
     */
    useEffect(() => {
        const currentUrl = state[EnumVideoState.video]?.url;
        setUrl(currentUrl);
    }, [state[EnumVideoState.video]?.url]);

    return (
        <unite-video
            id="isLive-video"
            style={{height: height, width: '100%'}}
            palymode="autoplay"
            library={`${process.env.REACT_APP_QIANKUN_publicPath}`}
            src={url}
            stream={videoCfg.isLive}
            encoding={videoCfg.encoding}
        ></unite-video>
    )
};

export default DevicesVideo;

2、Vue中使用

import '@sany/uniteVideo';
<unite-video
             id="isLive-video"
             width="100%"
             height="600px"
             stream="live"
             palymode="autoplay"
             src="http://10.88.1.118/flv/57d557d262ea4c12b59a2b4798b0efa2"
             encoding="h264"
             plugin="wasm">
</unite-video>

3、layout配置

{
    "defaultSelected": "4",// 默认选中项
    "data": [
        {
            "name": "1分屏",
            "key": "1",
            "stream": "mainStream", // 主码流  subStream 子码流 后续如果某个分屏想使用主码流 则使用该字段配置
            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAANUlEQVRIS+3SsQkAAAwCwbj/0GaEr1LlrQXhMG07h4kDpCsRCY1EEqEAFnyRRCiABV/0gGgBj4BfuRanDZkAAAAASUVORK5CYII=",
            "children": [
                {
                    "type": "row",
                    "height": "100%",
                    "children": [
                        {
                            "type": "col",
                            "width": 24,
                            "height": "100%"
                        }
                    ]
                }
            ]
        },
        {
            "name": "4分屏",
            "key": "4",
            "selected": true, // 选中项
            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAeklEQVRIS2P8////fwbiQQMDAwMIEw0YRy0gFFajQUQohBhGg2hwBFE9QWdQoIDUSOZkYGD4Top9pFogwcDA8IKWFqgzMDDcpKUFZgwMDKdoaYEbAwPDLlpaEMrAwLCalhakMDAwzKGlBcUMDAy9tLRgtE4mGLokBxEAWbp2OaL7UUIAAAAASUVORK5CYII=",
            "children": [
                {
                    "type": "row",
                    "height": "50%",
                    "children": [
                        {
                            "type": "col",
                            "width": 12
                        },
                        {
                            "type": "col",
                            "width": 12
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "50%",
                    "children": [
                        {
                            "type": "col",
                            "width": 12
                        },
                        {
                            "type": "col",
                            "width": 12
                        }
                    ]
                }
            ]
        },
        {
            "name": "6分屏",
            "key": "6",
            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAArElEQVRIS+3Tqw7CQBCF4a+GBAS8EkEgkUgkEslDIJFIJBJJwuWJuAgCrqRJm6C2gXbBdJOTmWx259/snEnSNE19v07oh64nDaD5ojJ//cRFwUfUYdMrCt3QRa9QHYBm0II9/ImL/t+DPR545vE9z/ZaaKOTxywvlJRNYmbTY+DQAYOSInecccn10RzMsQgAKjd5hmVMwBSrmIAJ1jEBY2xiAkbYxgQMsasCeAFpiYuxF7ZEFQAAAABJRU5ErkJggg==",
            "children": [
                {
                    "type": "row",
                    "height": "66.66666666%",
                    "children": [
                        {
                            "type": "col",
                            "width": 16
                        },
                        {
                            "type": "col",
                            "width": 8,
                            "children": [
                                {
                                    "type": "row",
                                    "height": "100%",
                                    "children": [
                                        {
                                            "type": "col",
                                            "width": 24,
                                            "height": "50%"
                                        },
                                        {
                                            "type": "col",
                                            "width": 24,
                                            "height": "50%"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "33.3333333333%",
                    "children": [
                        {
                            "type": "col",
                            "width": 8
                        },
                        {
                            "type": "col",
                            "width": 8
                        },
                        {
                            "type": "col",
                            "width": 8
                        }
                    ]
                }
            ]
        },
        {
            "name": "8分屏",
            "key": "8",
            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAuUlEQVRIS+2VoQ7CQAyGvz0Adg+DIiFZ8LPg0fAA8ALzuIlpPIaAQPMQBIWdwxxpchMsveSaBTPuksr2S//+12bOOcfwd/UlZv1SWQJ4ScYh0V7zShpyp8o4hizd/PQndzJ9mSm56E9cdBl+b8IVxEUa4AzMlTSx4hR4+WgDpSdALhGy6RaolGTZmNrWrIEHsIs9mWvgYABIxzcLYAU0BoBIdwc2sR2UwNEIeALLWMACOBkBb6Do53wAJ7KJ838GpCwAAAAASUVORK5CYII=",
            "children": [
                {
                    "type": "row",
                    "height": "75%",
                    "children": [
                        {
                            "type": "col",
                            "height": "100%",
                            "width": 18
                        },
                        {
                            "type": "col",
                            "width": 6,
                            "height": "100%",
                            "children": [
                                {
                                    "type": "row",
                                    "height": "100%",
                                    "children": [
                                        {
                                            "type": "col",
                                            "width": 24,
                                            "height": "33.333333333%"
                                        },
                                        {
                                            "type": "col",
                                            "width": 24,
                                            "height": "33.333333333%"
                                        },
                                        {
                                            "type": "col",
                                            "width": 24,
                                            "height": "33.333333333%"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "25%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                }
            ]
        },
        {
            "name": "9分屏",
            "key": "9",
            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABAklEQVRIS7XVL0gEQRiG8d/ZVNAgWGwWwWgSk4gIFqPBYLQIxstymIyCxWgwGC2CiprEZBQsNovgv3DFsjKwB1tuFhm+gZfZ5WPnGWa/Z7dTVVVl+FjDVaZ+j+VMXacFsIGLSMAmziMB2ziNBOzgJBKwh6NIQBeHpYC7zAK3WMm1YVsttek1PvFVz7+Nhw6wjzGM1hlcp3kE3438YAKTg7R5MI330iPKmTyHl0jAIh4jAeu4jARs4SwSsIvjUkDOgxustvV62+c650EPKannm0lOpPs0+g2Pkkv/8mC8XmDYJot/OFP4KH0HOdFm8BYJmMVrJGAez5GABTxFApbwUAL4A7sDmrHi+FH1AAAAAElFTkSuQmCC",
            "children": [
                {
                    "type": "row",
                    "height": "33.33333333%",
                    "children": [
                        {
                            "type": "col",
                            "width": 8
                        },
                        {
                            "type": "col",
                            "width": 8
                        },
                        {
                            "type": "col",
                            "width": 8
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "33.33333333%",
                    "children": [
                        {
                            "type": "col",
                            "width": 8
                        },
                        {
                            "type": "col",
                            "width": 8
                        },
                        {
                            "type": "col",
                            "width": 8
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "33.33333333%",
                    "children": [
                        {
                            "type": "col",
                            "width": 8
                        },
                        {
                            "type": "col",
                            "width": 8
                        },
                        {
                            "type": "col",
                            "width": 8
                        }
                    ]
                }
            ]
        },
        {
            "name": "12分屏",
            "key": "12",
            "children": [
                {
                    "type": "row",
                    "height": "33.33333333%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "33.33333333%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "33.33333333%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                }
            ]
        },
        {
            "name": "13分屏",
            "key": "13",
            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAYCAYAAACfpi8JAAAAz0lEQVRIS+2V0QmCMRCDv38S3UA30E10E3UCHUEnUTfQDXQDnaAS6NOPdy20PggX6FMDDWlyN6SUEjauwBY4O5xdvtu0cIYQMrIvHBnnSY4snZC9gAcwdzi6F6YtHAnxGnEHjsDeeaTm6pRJK4vcIyM1QooVDyHfwto6Wbt9jUa4BTVCxwt0rZALYDZUGfF2xLOzkEW0JjsQ9R1HocoRpdnCLY/4Q001HI7WhLD2wmomGXjn1sycR9QsYdLC6THii7YDRU4I+cWuKdr+V1/zAVWpsrwtNJ3PAAAAAElFTkSuQmCC",
            "children": [
                {
                    "type": "row",
                    "height": "25%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "50%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6,
                            "children": [
                                {
                                    "type": "row",
                                    "height": "100%",
                                    "children": [
                                        {
                                            "type": "col",
                                            "height": "50%",
                                            "width": 24
                                        },
                                        {
                                            "type": "col",
                                            "height": "50%",
                                            "width": 24
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "col",
                            "width": 12
                        },
                        {
                            "type": "col",
                            "width": 6,
                            "children": [
                                {
                                    "type": "row",
                                    "height": "100%",
                                    "children": [
                                        {
                                            "type": "col",
                                            "height": "50%",
                                            "width": 24
                                        },
                                        {
                                            "type": "col",
                                            "height": "50%",
                                            "width": 24
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "25%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                }
            ]
        },
        {
            "name": "16分屏",
            "key": "16",
            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABZklEQVRIS7XWP0hWYRTH8c+7q0OD4JqDTc1N5SS0CEE4NTQEgTS51BIJgig4SpOQODu1lEIU0SAECeKgQwaSJA4KUgQ5vPLAXbqeI/fC+x54lt/z58t5fufc+3S63W7X1biPd4E+izLq8akSxusTnQTwEOv9BDzGaj8Bz7DcT8BzLPYKcC84qGdSZvINnAaUTF/CH7xqWkW3sBcAMn0NP9oA7uJzAMj09/iKl00zyPog00uj7eNpU8A0XgcZZHoBnOFBBLhiTM9KCFkVDeB3AMr0eVy0MfkmDgJApq/gqA3gDrYCQKa/xXYbwCTKpnpkejF5F+Ub9l9kHjxBSbsemV4AJ5iKAB+DgzYx0UJPC69ksIHjavytVs5FXYkFvKjWlD9hJzl5EMNlZFc0hPNg81jVsfWpNzhsY/IIfgWAcm3l+urxAV/aAEbxvaXJ3zDTtIpuYycAXPeq+IlHTQFZQ10H+BdV3iXft7Dz+OemEQAAAABJRU5ErkJggg==",
            "children": [
                {
                    "type": "row",
                    "height": "25%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "25%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "25%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                },
                {
                    "type": "row",
                    "height": "25%",
                    "children": [
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        },
                        {
                            "type": "col",
                            "width": 6
                        }
                    ]
                }
            ]
        }
    ]
}