{"id":18369054,"url":"https://github.com/dog-days/html5-player","last_synced_at":"2025-04-06T17:31:56.564Z","repository":{"id":57267938,"uuid":"119640358","full_name":"dog-days/html5-player","owner":"dog-days","description":"基于react的h5播放器","archived":false,"fork":false,"pushed_at":"2019-03-27T05:27:49.000Z","size":501,"stargazers_count":34,"open_issues_count":2,"forks_count":12,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-21T23:34:58.558Z","etag":null,"topics":["dva","flv","h5","h5-video","hls","hls-flv","http-flv","living","react","react-video"],"latest_commit_sha":null,"homepage":"https://dog-days.github.io/demo/html5-player/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dog-days.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-31T05:40:26.000Z","updated_at":"2024-03-19T13:45:05.000Z","dependencies_parsed_at":"2022-09-02T05:41:01.941Z","dependency_job_id":null,"html_url":"https://github.com/dog-days/html5-player","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fhtml5-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fhtml5-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fhtml5-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dog-days%2Fhtml5-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dog-days","download_url":"https://codeload.github.com/dog-days/html5-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247522443,"owners_count":20952552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dva","flv","h5","h5-video","hls","hls-flv","http-flv","living","react","react-video"],"created_at":"2024-11-05T23:28:17.401Z","updated_at":"2025-04-06T17:31:55.134Z","avatar_url":"https://github.com/dog-days.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Html5 Player\n\n[![build status](https://travis-ci.org/dog-days/html5-player.svg?branch=master)](https://travis-ci.org/dog-days/html5-player) [![codecov](https://codecov.io/gh/dog-days/html5-player/branch/master/graph/badge.svg)](https://codecov.io/gh/dog-days/html5-player) [![npm package](https://badge.fury.io/js/html5-player.svg)](https://www.npmjs.org/package/html5-player) [![NPM downloads](http://img.shields.io/npm/dm/html5-player.svg)](https://npmjs.org/package/html5-player)\n\n**如果你使用了 webpack 4，请确保 requre.ensure 方法开启，如下配置：**\n\n`create-react-app` 创建的项目禁用了 `requre.ensure`。\n\n```js\n...\nmodule: {\n    strictExportPresence: true,\n    rules: [\n      { parser: { requireEnsure: true } },\n    ]\n...\n}\n...\n```\n\n本视频播放器使用了 react、redux、redux-saga 实现了支持原生 H5 Video 的所有格式，同时添加了对 HLS 和 FLV 的支持。为了减轻打包 js 文件，兼容了 preact 替换 react。\n\n\u003e **不使用 react 的项目一样可以使用 html5-player，不过打包后的代码包含了 react 相关代码，如果使用 jsx 语法，那么用法大部分基本一致。当然建议使用 react 更好，如果使用 react、redux、redux-saga，除开这些依赖代码，html5-player 的代码，包括图片样式，gzip 后在 30KB 以内。**\n\n\u003e umd 功能暂时不做处理了，没怎么用到。\n\n## 功能\n\n* 原生 H5 支持的视频源播放\n* HLS 视频播放\n* FLV 视频播放\n* 字幕功能（自定义和hls自带字幕）\n* 缩略图预览\n* 播放速度\n* 视频画质（清晰度，目前只支持hls.js的清晰度）\n* 视频断片功能（这个是个额外功能，包括fragment和history的）\n* 播放列表功能\n\n## 兼容性\n\n兼容 IE10 以上，Edge、谷歌、火狐、Opera、Safari 等主流浏览器。但是由于需要支持 HLS 和 FLV，HLS 只兼容了 IE11。FLV 也是只兼容了到 IE11 和 Sarari 10 版本以上（**但是目前IE11播放一些直播也不行，safari播放一些直播经常不断返回结束事件**）。\n\n\u003e 不支持音频文件的 UI，目前本项目只处理了视频 UI。\n\n\u003e 目前只支持 PC 端，暂不支持移动端。\n\n**由于 flv 直播状态兼容性问题，需要通过设置 isLiving=true 来强制设置为直播状态。**\n\n## 入门使用\n\n### 安装\n\n首先安装`html5-player`\n\n```sh\nnpm i html5-player -S\n```\n\n### 启动demo\n\nclone 本项目，运行下面的命令\n\n```sh\nnpm install\nnpm start\n#npm run start 可以查看开发环境demo\n#npm run build-demo可以构建项目demo\n#npm run serve-demo-build 可以启动服务查看项目demo\n```\n\n### 使用\n\n在 react 中的使用，react 版本要求是 v15.x 以上，还需要引入样式：\n\n```js\nimport 'html5-player/libs/assets/css/style.css';\n```\n\n```jsx\nimport React from 'react';\nimport Html5Player from 'html5-player';\nclass View extends React.Component {\n  render() {\n    return (\n      \u003cHtml5Player\n        title=\"这里是标题\"\n        file=\"/test.mp4\"\n        //logo支持string，React Element和plainObject\n        logo={{\n          image: '/logo.png',\n          link: 'https://github.com/dog-days/html5-player',\n        }}\n        videoCallback={palyer =\u003e {\n          //player参数是实例化后的播放器，详情请看后续API\n        }}\n      /\u003e\n    );\n  }\n}\n```\n\n**如果使用 flv 直播，需要设置 enableWorker，可以减少延时到 1 秒左右。 但是如果不是直播，不可以设置，否则会报错。**\n\n```jsx\n\u003cHtml5Player\n  flvConfig={{ enableWorker: true }}\n  title=\"这里是标题\"\n  file=\"/test.mp4\"\n  //logo支持string，React Element和plainObject\n  logo={{\n    image: '/logo.png',\n    link: 'https://github.com/dog-days/html5-player',\n  }}\n/\u003e\n```\n\n### 版本查看\n\n```js\nwindow.html5PlayerVersion\n```\n\n## 播放器错误机制说明\n\n经过一系列的改进，最终发觉，还是自定义超时处理最合理，所以`html5-player`**只会报超时错误**，而且一开始的错误也会重连，具体参数请参考`props参数`**timeout**和**retryTimes**。\n\n## API\n\n### 播放器 props 参数\n\n```jsx\n//react jsx用法\n\u003cHtml5Player {...props} /\u003e\n//umd用法 html5Player(props)\n//历史视频使用方式\n\u003cHistoryPlayer {...props} /\u003e\n```\n\n参数如下：\n\n| props                    | 类型                                  | 说明                                                         | 默认值                  | 必填 |\n| :----------------------- | :------------------------------------ | :----------------------------------------------------------- | :---------------------- | :--- |\n| file                     | string                                | 视频文件路径                                                 | 无                      | 是   |\n| forceOpenHls，           | boolean                               | 强制使用hls.js，safari也会使用                               | 无                      | 否   |\n| isLiving                 | boolean                               | 强制设置为直播状态。safari 中 flv 无法获取直播状态，所以需要设置这个。 | false                   | 否   |\n| livingMaxBuffer          | float                                 | 直播最大缓存时间（秒），如果卡设置大一定的值，理论上是越小延时越小。(hls 需要而外加上 15 秒) | 2                       | 否   |\n| height                   | string \u003cbr /\u003enumber                   | 播放器高度，不设置高度时，父元素的高度需要设置。             | 100%                    | 否   |\n| width                    | string \u003cbr /\u003enumber                   | 播放器宽度                                                   | 100%                    | 否   |\n| title                    | string\u003cbr /\u003eReact.element             | 标题                                                         | 无                      | 否   |\n| logo                     | string\u003cbr /\u003eReact.element\u003cbr /\u003eobject | logo                                                         | 无                      | 否   |\n| poster                   | string                                | video 的 poster，海报图                                      | 无                      | 否   |\n| stretching               | string                                | 调整视频大小以适合播放器尺寸。                               | uniform                 | 否   |\n| aspectratio              | string                                | 播放器纵横比，\u003cbr /\u003e只有设置了 width 才有效\u003cbr /\u003e，格式为`x:y` | 16:9                    | 否   |\n| muted                    | boolean                               | 是否静音                                                     | false                   | 否   |\n| loop                     | boolean                               | 是否循环播放                                                 | false                   | 否   |\n| preload                  | boolean                               | 视频是否预加载，`autoplay=false`才会生效                     | true                    | 否   |\n| autoplay                 | boolean                               | 是否自动播放                                                 | false                   | 否   |\n| controls                 | boolean\u003cbr /\u003eobject                   | 是否展示 controllerbar                                       | true                    | 否   |\n| controlbarHideTime       | number                                | 用户不活跃后，多长时间隐藏controlbar，毫秒                   | 2000                    | 否   |\n| localization             | object                                | 多语言设置                                                   | 查看后面说明            | 否   |\n| tracks                   | object                                | 各种 track 设置                                              | 无                      | 否   |\n| fragment                 | string \u003cbr /\u003eobject                   | 视频断片功能                                                 | 无                      | 否   |\n| timeSliderShowFormat     | string                                | tootip 展示的时间格式，值为`time`和`date`，date 只有在 fragment 设置情况下生效。 | date                    | 否   |\n| playbackRates            | array                                 | video 的 playebackRates 设置                                 | [1, 1.25, 1.5, 1.75, 2] | 否   |\n| playbackRateControls     | boolean                               | 是否开启 playebackRate 控制                                  | true                    | 否   |\n| videoCallback            | function                              | 打包的 js 没有这个属性，详细看后面播放器实例化 API           | 无                      | 否   |\n| showLoadingLazyTime      | number                                | 延时展示 loading 的时间（毫秒）                              | 500                     | 否   |\n| showErrorMessageLazyTime | number                                | 延时展示错误信息的时间（毫秒）                               | 500                     | 否   |\n| contextMenu              | boolean\u003cbr /\u003earray\u003cbr /\u003eReact Element | 鼠标右击菜单                                                 | 展示一行默认信息        | 否   |\n| timeout                  | number                                | 视频超时设置，10000ms 后，直播会尝试重载，尝试`retryTimes`次后，展示超时信息。而非直播则`retryTimes * timeout`后展示展示超时信息，不自动重载。 | 10 * 1000               | 否   |\n| retryTimes               | number                                | timeout 后尝试，重新加载视频次数\u003cbr /\u003e理论上时间等于`retryTimes * timeout`后会展示超时信息，实际上，超时信息展示会大于 `retryTimes * timeout`，误差 5 秒左右。 | 5                       | 否   |\n| stretching               | string                                | 调整视频大小以适合播放器尺寸。                               | uniform                 | 否   |\n| selection                | object\u003cbr /\u003eboolean                   | 配合fragment使用和历史视频，截取视频，请参考下面selection说明 | undefined               | 否   |\n| leftSelectionComponent   | react element                         | selection左边组件                                            | 无                      | 否   |\n| rightSelectionComponent  | react element                         | selection右边组件                                            | 无                      | 否   |\n| LoadingMessageComponent  | react element                         | loading而外信息组件                                          |                         |      |\n\n#### props.LoadingMessageComponent\n\n这个组件有三个固定props，目前这个组件，只有重连状态的。\n\n| props          | 说明                      |\n| -------------- | ------------------------- |\n| count          | 重连次数                  |\n| type           | 类型，目前只有reload类型  |\n| loadingMessage | 默认的loading message文案 |\n\n```jsx\nfunction LoadingMessageComponent(props) {\n  return \u003cspan\u003e超时第{props.count}次重连中...\u003c/span\u003e;\n}\n\n\u003cHtml5Player\n  file=\"/test.mp4\"\n  LoadingMessageComponent={\u003cLoadingMessageComponent/\u003e}\n/\u003e\n```\n\n#### props.controls\n\ncontrols 默认为 true。\n\n| controls\b       | 默认值 | 说明                                                        |\n| :------------- | :----- | :---------------------------------------------------------- |\n| timeSlider     | true   | 播放进度控制条（直播没有）                                  |\n| playPause      | true   | 开始暂停按钮                                                |\n| volume         | true   | 音量按钮                                                    |\n| time           | true   | 播放时间（直播没有）                                        |\n| setting        | false  | 配置（播放速度等）                                          |\n| speed          | false  | 播放速度                                                    |\n| subtitle       | true   | 如果有字幕默认显示                                          |\n| pictureQuality | true   | 清晰度（目前只支持hls.js协议的）,如果当前m3u8包含清晰度信息 |\n| rotate         | false  | 旋转（逆时针，每次增加90度）                                |\n| capture        | false  | 截屏，截屏功能存在跨域问题，所以需要后端处理跨域响应头。    |\n\n`controls=true`时，上面 controls 参数默认值为 true 的都会显示，`controls=false`控制条隐藏。\n\n`controls={ timeSlider: false }`时，timeSlider 隐藏，其他按钮按默认值展示。\n\n**controls 还可以自定义 controlbar 按钮**，例如自定义下载按钮：\n\n```jsx\n\u003cHtml5Player\n  file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n  controls={{\n    dowload: (\n      \u003ca className=\"float-right\" href={file} target=\"_blank\" download={file}\u003e\n        \u003csvg className=\"nan-icon\" aria-hidden=\"true\"\u003e\n          \u003cuse xlinkHref=\"#icon-download\" /\u003e\n        \u003c/svg\u003e\n      \u003c/a\u003e\n    ),\n  }}\n/\u003e\n```\n\n#### props.tracks\n\n| tracks[] | 默认值 | 说明                                  | 必填 |\n| -------- | ------ | ------------------------------------- | ---- |\n| kind     | 无     | 类型，目前只有`subtitle`和`thumbnail` | 是   |\n| file     | 无     | web vtt文件链接                       | 是   |\n| label    | 无     | subtitle列表的展示名                  | 是   |\n\n* 字幕\n\n  字幕是可以是列表的。\n\n  ```jsx\n  \u003cHtml5Player\n    file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n    tracks={[\n      {\n        kind: 'subtitle',\n        file: '/subtitle-zh-cn.vtt',\n        label: '中文',\n      },\n      {\n        kind: 'subtitle',\n        file: '/subtitle-en.vtt',\n        label: 'English',\n      }, \n    ]}\n  /\u003e\n  ```\n\n* 缩略图\n\n  ```jsx\n  \u003cHtml5Player\n    file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n    tracks={[\n      {\n        kind: 'thumbnail',\n        file: '/thumbnail.vtt',\n      },\n    ]}\n  /\u003e\n  ```\n\n#### props.fragment\n\n视频断片功能，比较特殊的一个功能，这种情况比较少用。**最适合用在 m3u8，因为 m3u8 是文本，可以很简单的合并分段的视频。**\n\n```jsx\n\u003cHtml5Player\n  file=\"https://media.w3.org/2010/05/sintel/movie.m3u8\"\n  fragment=\"/fragment.json\"\n/\u003e\n```\n\n或者\n\n```jsx\n\u003cHtml5Player\n  file=\"https://media.w3.org/2010/05/sintel/movie.m3u8\"\n  fragment={{\n    total: {\n      begin: '2017-10-03 00:00:00',\n      end: '2017-10-03 00:01:19',\n    },\n    fragments: [\n      {\n        begin: '2017-10-03 00:00:02',\n        end: '2017-10-03 00:00:12',\n      },\n      {\n        begin: '2017-10-03 00:00:32',\n        end: '2017-10-03 00:00:42',\n      },\n      {\n        begin: '2017-10-03 00:00:45',\n        end: '2017-10-03 00:00:52',\n      },\n    ],\n  }}\n/\u003e\n```\n\nfragment 定义如下：\n\n```json\n{\n  \"total\": {\n    \"begin\": \"2017-10-03 00:00:00\",\n    \"end\": \"2017-10-03 00:01:19\"\n  },\n  \"fragments\": [\n    {\n      \"begin\": \"2017-10-03 00:00:02\",\n      \"end\": \"2017-10-03 00:00:12\"\n    },\n    {\n      \"begin\": \"2017-10-03 00:00:32\",\n      \"end\": \"2017-10-03 00:00:42\"\n    },\n    {\n      \"begin\": \"2017-10-03 00:00:45\",\n      \"end\": \"2017-10-03 00:00:52\"\n    }\n  ]\n}\n```\n\n| 参数              | 类型   | 说明                                             |\n| ----------------- | ------ | ------------------------------------------------ |\n| total.begin       | string | 整个视频的开始时间，格式为 `YYYY-MM-DD HH:mm:ss` |\n| total.end         | string | 整个视频的结束时间，格式为 `YYYY-MM-DD HH:mm:ss` |\n| fragments[].begin | string | 视频断片的开始时间，格式为`YYYY-MM-DD HH:mm:ss`  |\n| fragments[].end   | string | 视频断片的结束时间，格式为 `YYYY-MM-DD HH:mm:ss` |\n\n#### props.selection\n\n需要配合`fragments`\n\n| 参数      | 类型   | 说明                 | 必填 |\n| --------- | ------ | -------------------- | ---- |\n| begin     | number | 截取开始时间，单位秒 | 否   |\n| total.end | number | 截取结束时间，单位秒 | 否   |\n| minGap    | number | 最小的间距，单位秒   | 否   |\n| maxGap    | number | 最大的间距，单位秒   | 否   |\n\n#### props.logo\n\n* string\n\n  这种情况，点击 logo 无跳转。\n\n  ```jsx\n  \u003cHtml5Player\n    file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n    logo=\"/logo.png\"\n  /\u003e\n  ```\n\n* object\n\n  这种情况，点击 logo 无跳转。\n\n  ```jsx\n  \u003cHtml5Player\n    file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n    logo={{\n      image: '/logo.png',\n      link: 'https://github.com/dog-days/html5-player',\n    }}\n  /\u003e\n  ```\n\n* React.element\n\n  这种情况，点击 logo 无跳转。\n\n  ```jsx\n  \u003cHtml5Player\n    file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n    logo={\n      \u003ca href=\"https://github.com/dog-days/html5-player\"\u003e\n        \u003cimg src=\"/logo.png\" /\u003e\n      \u003c/a\u003e\n    }\n  /\u003e\n  ```\n\n#### props.localization\n\n默认值为：\n\n```js\n//异步加载hls或flv代码，才会提示播放器加载中。\n{\n  loadingPlayerText: '播放器加载中...',\n  unknownError: '视频加载出错',\n  fileCouldNotPlay: '视频加载出错',\n  timeout: '视频加载超时',\n  speed: '倍速',\n  normalSpeed: '正常',\n  videoNotSupport: '当前浏览器不支持此视频格式',\n}\n```\n\n#### props.contextMenu\n\n* boolean\n\n  是否展示 contextMenu，`true`是，展示默认的 contextMenu。\n\n  ```jsx\n  \u003cHtml5Player\n    file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n    contextMenu={false}\n  /\u003e\n  ```\n\n* array\n\n  这种情况，适合用于展示多个，展示样式也是用默认的。\n\n  ```jsx\n  \u003cHtml5Player\n    file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n    contextMenu={[\u003ca href=\"#demo\"\u003edemo\u003c/a\u003e, \u003ca href=\"#demo2\"\u003edemo2\u003c/a\u003e]}\n  /\u003e\n  ```\n\n* React.element\n\n  可以进行自定义结构和样式。\n\n  ```jsx\n  \u003cHtml5Player\n    file=\"https://media.w3.org/2010/05/sintel/trailer.mp4\"\n    contextMenu={\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003ca href=\"#demo\"\u003edemo\u003c/a\u003e\n        \u003c/li\u003e,\n        \u003cli\u003e\n          \u003ca href=\"#demo2\"\u003edemo2\u003c/a\u003e\n        \u003c/li\u003e,\n      \u003c/ul\u003e\n    }\n  /\u003e\n  ```\n\n#### props.stretching\n\n完全采用jwplayer的stretching用法。\n\n- uniform\n\n  适合播放器尺寸，同时保持宽高比。\n\n- exactfit\n\n  适合播放器尺寸而不保持宽高比。\n\n- fill\n\n  缩放和裁剪视频以填充尺寸，保持纵横比。\n\n- none\n\n  保持显示视频文件的实际尺寸大小。\n\n请参考下图stretching用法。\n\n![img](https://dog-days.github.io/demo/static/stretch-options.png)\n\n### 播放器实例化对象\n\nreact 在 props.videoCallback 返回播放器实例\n\n```jsx\n\u003cHtml5Player\n  file=\"/test.mp4\"\n  videoCallback={palyer =\u003e {\n    //player参数是实例化后的播放器\n  }}\n/\u003e\n```\n\numd 打包后在 primse 对象中返回播放器实例。\n\n```js\nhtml5Player({\n  id: 'test',\n  file: '/test.mp4',\n}).then(player =\u003e {\n  //player参数是实例化后的播放器\n});\n```\n\n#### 属性\n\n\u003e 这些属性值只读。\n\n| player 属性 | 类型    | 说明                                                         |\n| :---------- | :------ | :----------------------------------------------------------- |\n| loading     | boolean | 加载中                                                       |\n| playing     | boolean | 播放中                                                       |\n| ended       | boolean | 播放是否结束                                                 |\n| currentTime | number  | 当前播放时间                                                 |\n| duration    | number  | 当前视频时长                                                 |\n| bufferTime  | number  | 视频缓存时间，单位秒                                         |\n| seeking     | boolean | 是否在 seeking，timeline 点击拖动也是在 seeking，这个跟原生的有点不一样。 |\n| isError     | boolean | 视频播放是否出错                                             |\n\n#### 方法\n\n* play()\n\n  播放视频。\n\n* pause()\n\n  暂停视频播放。\n\n* setVolume(volume)\n\n  控制音量。\n\n  | 参数   | 类型   | 说明                   | 必填 |\n  | ------ | ------ | ---------------------- | ---- |\n  | volume | number | 音量大小，最大值为 100 | 是   |\n\n* setMuted(flag)\n\n  控制音量。\n\n  | 参数 | 类型    | 说明     | 必填 |\n  | ---- | ------- | -------- | ---- |\n  | flag | boolean | 静音控制 | 是   |\n\n* replay()\n\n  重新播放。\n\n* setSeeking(percent)\n\n  视频播放进度选取。\n\n  | 参数    | 类型   | 说明                                     | 必填 |\n  | ------- | ------ | ---------------------------------------- | ---- |\n  | percent | number | 视频播放位置，按百分比来算的，最大值为 1 | 是   |\n\n* fullscreen(flag)\n\n  全屏或者退出全屏操作。\n\n  | 参数 | 类型    | 说明                      | 必填 |\n  | ---- | ------- | ------------------------- | ---- |\n  | flag | boolean | true 全屏，false 退出全屏 | 是   |\n\n* controlbar(flag,delayTimeToHide,onControlbarEnter)\n\n  控制条显示或者隐藏控制。\n\n  | 参数                 | 类型    | 说明                                  | 必填 |\n  | -------------------- | ------- | ------------------------------------- | ---- |\n  | flag                 | boolean | true 显示，false 隐藏                 | 是   |\n  | delayTimeToHide      | number  | 延时隐藏时间，毫秒级（只对隐藏有效）  | 否   |\n  | alwaysShowControlbar | boolean | 为 true 时其他操作无法隐藏 controlbar | 否   |\n\n* showErrorMessage(message)\n\n  展示错误信息。\n\n  | 参数    | 类型   | 说明                                   | 必填 |\n  | ------- | ------ | -------------------------------------- | ---- |\n  | message | string | 错误信息，为 null 时，错误信息不展示。 | 是   |\n\n* playbackRate(rate)\n\n  控制播放速度。\n\n  | 参数 | 类型   | 说明            | 必填 |\n  | ---- | ------ | --------------- | ---- |\n  | rate | number | playbackRate 值 | 是   |\n\n* setSelection(payload)\n\n  payload参数请参考上面的`props.selection`\n\n  ```js\n  {\n    begin,\n    end,\n    minGap,\n    maxGap\n  }\n  ```\n\n* on(type, callback)\n\n  事件监控，这里可以继承所有[video DOM 事件](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)（用 addEventlisener 绑定事件一样），同时也可以监听`html5-player`的自定义事件。\n\n  ```js\n  /**\n   * 监控事件\n   * @param { string } type 事件类型\n   * @param { function } callback 回调函数\n   */\n  on(type, callback) {}\n  ```\n\n* off(type)\n\n  移除指定或者部分或者全部监控事件，包括多次绑定的事件，当 type=undefined 移除全部事件。\n\n  ```js\n  /**\n   * 移除指定或者部分或者全部监控事件，包括多次绑定的事件\n   * @param { string || undefined || array } type 事件类型\n   */\n  off(type) {}\n  ```\n\n### 自定义事件列表\n\n可以使用实例化后的播放器监控，例如：\n\n```js\nplayer.on('loading', function(loading) {\n  console.log(loading);\n});\n```\n\n* focus\n\n  鼠标是否聚焦在播放器，鼠标移动到播放器或者点击播放器都会聚焦，解除聚焦需要点击非播放器的其他地方。\n\n* loading\n\n  事件加载事件，中途因为的视频加载也会触发此事件。\n\n* ready\n\n  视频准备完成，可以播放（video dom dataloaded 事件触发）。\n\n* replay\n\n  视频播放结束，点击重新播放按钮，会触发重新播放事件。\n\n* volume\n\n  音量变化事件。\n\n* seek\n\n  视频时间轴（time-line）拖动，点击触发。\n\n* fullscreen\n\n  全屏事件触发，包括退出全屏。\n\n* controlbar\n\n  视频控制台显示与隐藏事件。\n\n* reload\n\n  重载事件，这个事件一般都是视频加载触发，出现刷新按钮，点击后触发。\n\n* error\n\n  这个错误事件是 hls 或者 flv 视频解析报错时触发的。\n\n* selection\n\n  触发selection操作。\n\n  ```js\n  player.setSelection({\n    begin: 5,\n    end: 70,\n    seekingDisabled: true,//seekingDisabled禁止seeking功能，\n  });\n  //取消selection\n  player.setSelection(false);\n  ```\n\n* hlsFragmentInfo\n\n  返回hls.js ts文件的一些细信息，可以计算下载速度和带宽。\n\n  | 参数        | 类型   | 说明                     |\n  | ----------- | ------ | ------------------------ |\n  | requestTime | number | ts网络请求时间，单位毫秒 |\n  | duration    | number | ts时长，单位秒           |\n  | fileSize    | number | ts文件大小，单位bit      |\n\n#### 录像历史视频\n\n这个模式跟fragment效果差不多，不过这里是多个视频连在一起的（简单理解：有个视频播放列表）。\n\nprops用法跟原来的player一样，不过多了个`props.historyList`，然后`props.file`不用理。\n\n例子：\n\n```jsx\nimport React from 'react';\nimport Player from 'html5-player/libs/history';\n\nexport default class View extends React.Component {\n  state = {};\n  //录像断片处理\n  render() {\n    return (\n      \u003cdiv className=\"demo-container\"\u003e\n        \u003cdiv className=\"player-container\"\u003e\n          \u003cPlayer\n            historyList={{\n              beginDate: '2018-07-28 00:00:00',\n              duration: 20 + 654 + 12 + 52 + 52 + 10 + 654 + 20,\n              fragments: [\n                {\n                  begin: 0,\n                  end: 20,\n                },\n                {\n                  begin: 20,\n                  end: 20 + 654,\n                  file:\n                    'https://wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/elephantsdream2.smil/playlist.m3u8?test=2',\n                },\n                {\n                  begin: 20 + 654,\n                  end: 20 + 654 + 12,\n                },\n                {\n                  begin: 20 + 654 + 12,\n                  end: 20 + 654 + 12 + 52,\n                  file:\n                    'https://media.w3.org/2010/05/sintel/trailer.mp4?test=2',\n                },\n                {\n                  begin: 20 + 654 + 12 + 52,\n                  end: 20 + 654 + 12 + 52 + 52,\n                  file:\n                    'https://media.w3.org/2010/05/sintel/trailer.mp4?test=3',\n                },\n                {\n                  begin: 20 + 654 + 12 + 52 + 52,\n                  end: 20 + 654 + 12 + 52 + 52 + 10,\n                },\n                {\n                  begin: 20 + 654 + 12 + 52 + 52 + 10,\n                  end: 20 + 654 + 12 + 52 + 52 + 10 + 654,\n                  file:\n                    'https://wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/elephantsdream2.smil/playlist.m3u8',\n                },\n                {\n                  begin: 20 + 654 + 12 + 52 + 52 + 10 + 654,\n                  end: 20 + 654 + 12 + 52 + 52 + 10 + 654 + 20,\n                },\n              ],\n            }}\n          /\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n```\n\n**historyList结构**\n\nhistoryList的值可以是false，这样就是没有任何视频。\n\n| historyList | 类型                  | 说明                                                     | 必填 |\n| ----------- | --------------------- | -------------------------------------------------------- | ---- |\n| begin       | number                | 当前视频（或者断片）开始时间                             | 是   |\n| end         | number                | 当前视频（或者断片）结束时间                             | 是   |\n| file        | string \\|\\| undefined | 播放的链接，为undefined时，代表无视频（time-slider置灰） | 否   |\n\n### 播放列表\n\n简单例子\n\n```jsx\nimport React from 'react';\nimport Html5PlayerList from 'html5-player/playlist';\n\nexport default class View extends React.Component {\n  render() {\n    const playlist = [\n      {\n        title: 'test',\n        cover: 'https://t12.baidu.com/it/u=2991737441,599903151\u0026fm=173\u0026app=25\u0026f=JPEG?w=538\u0026h=397\u0026s=ECAA21D53C330888369488B703006041',\n        file: 'https://dog-days.github.io/demo/static/react.mp4'\n      }\n    ];\n    return (\n      \u003cHtml5PlayerList\n        playlist={playlist}\n        autoplay\n        activeItem={2}\n      /\u003e\n    );\n  }\n}\n```\n\nprops\n\n| props         | 类型             | 说明                                     | 默认值 | 必填 |\n| ------------- | ---------------- | ---------------------------------------- | ------ | ---- |\n| playlist      | array            | 播放列表                                 | 无     | 是   |\n| activeItem    | number           | 当前播放的视频（1开始算）                | 1      | 否   |\n| videoCarousel | bool\u003cbr /\u003enumber | 视频走定时轮播，可以设置定时间隔（毫秒） | false  | 否   |\n| 其他props     |                  | 继承video的所有props                     |        |      |\n\nprops.playlist\n\n| playlist[] | 类型                       | 说明                               | 默认值 | 必填 |\n| ---------- | -------------------------- | ---------------------------------- | ------ | ---- |\n| title      | string \u003cbr /\u003ereact element | 标题，覆盖Player的props.title      | 无     | 否   |\n| cover      | string                     | 列表的展示封面图（跟poster不一样） | 无     | 是   |\n| file       | string                     | 视频文件，覆盖Player的props.file   |        | 是   |\n| 其他props  |                            | 继承video的所有props               |        |      |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdog-days%2Fhtml5-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdog-days%2Fhtml5-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdog-days%2Fhtml5-player/lists"}