Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

dog-days/html5-player

Repository files navigation

Html5 Player

Ru Guo Ni Shi Yong Liao webpack 4,Qing Que Bao requre.ensure Fang Fa Kai Qi ,Ru Xia Pei Zhi :

create-react-app Chuang Jian De Xiang Mu Jin Yong Liao requre.ensure.

...
module: {
strictExportPresence: true,
rules: [
{ parser: { requireEnsure: true } },
]
...
}
...

Ben Shi Pin Bo Fang Qi Shi Yong Liao react, redux, redux-saga Shi Xian Liao Zhi Chi Yuan Sheng H5 Video De Suo You Ge Shi ,Tong Shi Tian Jia Liao Dui HLS He FLV De Zhi Chi . Wei Liao Jian Qing Da Bao js Wen Jian ,Jian Rong Liao preact Ti Huan react.

Bu Shi Yong react De Xiang Mu Yi Yang Ke Yi Shi Yong html5-player,Bu Guo Da Bao Hou De Dai Ma Bao Han Liao react Xiang Guan Dai Ma ,Ru Guo Shi Yong jsx Yu Fa ,Na Yao Yong Fa Da Bu Fen Ji Ben Yi Zhi . Dang Ran Jian Yi Shi Yong react Geng Hao ,Ru Guo Shi Yong react, redux, redux-saga,Chu Kai Zhe Xie Yi Lai Dai Ma ,html5-player De Dai Ma ,Bao Gua Tu Pian Yang Shi ,gzip Hou Zai 30KB Yi Nei .

umd Gong Neng Zan Shi Bu Zuo Chu Li Liao ,Mei Zen Yao Yong Dao .

Gong Neng

  • Yuan Sheng H5 Zhi Chi De Shi Pin Yuan Bo Fang
  • HLS Shi Pin Bo Fang
  • FLV Shi Pin Bo Fang
  • Zi Mu Gong Neng (Zi Ding Yi He hlsZi Dai Zi Mu )
  • Suo Lue Tu Yu Lan
  • Bo Fang Su Du
  • Shi Pin Hua Zhi (Qing Xi Du ,Mu Qian Zhi Zhi Chi hls.jsDe Qing Xi Du )
  • Shi Pin Duan Pian Gong Neng (Zhe Ge Shi Ge E Wai Gong Neng ,Bao Gua fragmentHe historyDe )
  • Bo Fang Lie Biao Gong Neng

Jian Rong Xing

Jian Rong IE10 Yi Shang ,Edge, Gu Ge , Huo Hu , Opera, Safari Deng Zhu Liu Liu Lan Qi . Dan Shi You Yu Xu Yao Zhi Chi HLS He FLV,HLS Zhi Jian Rong Liao IE11. FLV Ye Shi Zhi Jian Rong Liao Dao IE11 He Sarari 10 Ban Ben Yi Shang (Dan Shi Mu Qian IE11Bo Fang Yi Xie Zhi Bo Ye Bu Xing ,safariBo Fang Yi Xie Zhi Bo Jing Chang Bu Duan Fan Hui Jie Shu Shi Jian ).

Bu Zhi Chi Yin Pin Wen Jian De UI,Mu Qian Ben Xiang Mu Zhi Chu Li Liao Shi Pin UI.

Mu Qian Zhi Zhi Chi PC Duan ,Zan Bu Zhi Chi Yi Dong Duan .

You Yu flv Zhi Bo Zhuang Tai Jian Rong Xing Wen Ti ,Xu Yao Tong Guo She Zhi isLiving=true Lai Qiang Zhi She Zhi Wei Zhi Bo Zhuang Tai .

Ru Men Shi Yong

An Zhuang

Shou Xian An Zhuang html5-player

npm i html5-player -S

Qi Dong demo

clone Ben Xiang Mu ,Yun Xing Xia Mian De Ming Ling

npm install
npm start
#npm run start Ke Yi Cha Kan Kai Fa Huan Jing demo
#npm run build-demoKe Yi Gou Jian Xiang Mu demo
#npm run serve-demo-build Ke Yi Qi Dong Fu Wu Cha Kan Xiang Mu demo

Shi Yong

Zai react Zhong De Shi Yong ,react Ban Ben Yao Qiu Shi v15.x Yi Shang ,Huan Xu Yao Yin Ru Yang Shi :

import 'html5-player/libs/assets/css/style.css';
{ //playerCan Shu Shi Shi Li Hua Hou De Bo Fang Qi ,Xiang Qing Qing Kan Hou Xu API }} /> ); } }">import React from 'react';
import Html5Player from 'html5-player';
class View extends React.Component {
render() {
return (
<Html5Player
title="Zhe Li Shi Biao Ti "
file="/test.mp4"
//logoZhi Chi string,React ElementHe plainObject
logo={{
image: '/logo.png',
link: 'https://github.com/dog-days/html5-player',
}}
videoCallback={palyer => {
//playerCan Shu Shi Shi Li Hua Hou De Bo Fang Qi ,Xiang Qing Qing Kan Hou Xu API
}}
/>
);
}
}

Ru Guo Shi Yong flv Zhi Bo ,Xu Yao She Zhi enableWorker,Ke Yi Jian Shao Yan Shi Dao 1 Miao Zuo You . Dan Shi Ru Guo Bu Shi Zhi Bo ,Bu Ke Yi She Zhi ,Fou Ze Hui Bao Cuo .

"><Html5Player
flvConfig={{ enableWorker: true }}
title="Zhe Li Shi Biao Ti "
file="/test.mp4"
//logoZhi Chi string,React ElementHe plainObject
logo={{
image: '/logo.png',
link: 'https://github.com/dog-days/html5-player',
}}
/>

Ban Ben Cha Kan

window.html5PlayerVersion

Bo Fang Qi Cuo Wu Ji Zhi Shuo Ming

Jing Guo Yi Xi Lie De Gai Jin ,Zui Zhong Fa Jue ,Huan Shi Zi Ding Yi Chao Shi Chu Li Zui He Li ,Suo Yi html5-playerZhi Hui Bao Chao Shi Cuo Wu ,Er Qie Yi Kai Shi De Cuo Wu Ye Hui Zhong Lian ,Ju Ti Can Shu Qing Can Kao propsCan Shu timeoutHe retryTimes.

API

Bo Fang Qi props Can Shu

//react jsxYong Fa
<Html5Player {...props} />
//umdYong Fa html5Player(props)
//Li Shi Shi Pin Shi Yong Fang Shi
<HistoryPlayer {...props} />

Can Shu Ru Xia :

props Lei Xing Shuo Ming Mo Ren Zhi Bi Tian
file string Shi Pin Wen Jian Lu Jing Wu Shi
forceOpenHls, boolean Qiang Zhi Shi Yong hls.js,safariYe Hui Shi Yong Wu Fou
isLiving boolean Qiang Zhi She Zhi Wei Zhi Bo Zhuang Tai . safari Zhong flv Wu Fa Huo Qu Zhi Bo Zhuang Tai ,Suo Yi Xu Yao She Zhi Zhe Ge . false Fou
livingMaxBuffer float Zhi Bo Zui Da Huan Cun Shi Jian (Miao ),Ru Guo Qia She Zhi Da Yi Ding De Zhi ,Li Lun Shang Shi Yue Xiao Yan Shi Yue Xiao . (hls Xu Yao Er Wai Jia Shang 15 Miao ) 2 Fou
height string
number		 Bo Fang Qi Gao Du ,Bu She Zhi Gao Du Shi ,Fu Yuan Su De Gao Du Xu Yao She Zhi . 100% Fou
width string
number		 Bo Fang Qi Kuan Du 100% Fou
title string
React.element		 Biao Ti Wu Fou
logo string
React.element
object		 logo Wu Fou
poster string video De poster,Hai Bao Tu Wu Fou
stretching string Diao Zheng Shi Pin Da Xiao Yi Gua He Bo Fang Qi Chi Cun . uniform Fou
aspectratio string Bo Fang Qi Zong Heng Bi ,
Zhi You She Zhi Liao width Cai You Xiao
,Ge Shi Wei x:y		 16:9 Fou
muted boolean Shi Fou Jing Yin false Fou
loop boolean Shi Fou Xun Huan Bo Fang false Fou
preload boolean Shi Pin Shi Fou Yu Jia Zai ,autoplay=falseCai Hui Sheng Xiao true Fou
autoplay boolean Shi Fou Zi Dong Bo Fang false Fou
controls boolean
object		 Shi Fou Zhan Shi controllerbar true Fou
controlbarHideTime number Yong Hu Bu Huo Yue Hou ,Duo Chang Shi Jian Yin Cang controlbar,Hao Miao 2000 Fou
localization object Duo Yu Yan She Zhi Cha Kan Hou Mian Shuo Ming Fou
tracks object Ge Chong track She Zhi Wu Fou
fragment string
object		 Shi Pin Duan Pian Gong Neng Wu Fou
timeSliderShowFormat string tootip Zhan Shi De Shi Jian Ge Shi ,Zhi Wei timeHe date,date Zhi You Zai fragment She Zhi Qing Kuang Xia Sheng Xiao . date Fou
playbackRates array video De playebackRates She Zhi [1, 1.25, 1.5, 1.75, 2] Fou
playbackRateControls boolean Shi Fou Kai Qi playebackRate Kong Zhi true Fou
videoCallback function Da Bao De js Mei You Zhe Ge Shu Xing ,Xiang Xi Kan Hou Mian Bo Fang Qi Shi Li Hua API Wu Fou
showLoadingLazyTime number Yan Shi Zhan Shi loading De Shi Jian (Hao Miao ) 500 Fou
showErrorMessageLazyTime number Yan Shi Zhan Shi Cuo Wu Xin Xi De Shi Jian (Hao Miao ) 500 Fou
contextMenu boolean
array
React Element		 Shu Biao You Ji Cai Dan Zhan Shi Yi Xing Mo Ren Xin Xi Fou
timeout number Shi Pin Chao Shi She Zhi ,10000ms Hou ,Zhi Bo Hui Chang Shi Zhong Zai ,Chang Shi retryTimesCi Hou ,Zhan Shi Chao Shi Xin Xi . Er Fei Zhi Bo Ze retryTimes * timeoutHou Zhan Shi Zhan Shi Chao Shi Xin Xi ,Bu Zi Dong Zhong Zai . 10 * 1000 Fou
retryTimes number timeout Hou Chang Shi ,Zhong Xin Jia Zai Shi Pin Ci Shu
Li Lun Shang Shi Jian Deng Yu retryTimes * timeoutHou Hui Zhan Shi Chao Shi Xin Xi ,Shi Ji Shang ,Chao Shi Xin Xi Zhan Shi Hui Da Yu retryTimes * timeout,Wu Chai 5 Miao Zuo You . 		5 Fou
stretching string Diao Zheng Shi Pin Da Xiao Yi Gua He Bo Fang Qi Chi Cun . uniform Fou
selection object
boolean		 Pei He fragmentShi Yong He Li Shi Shi Pin ,Jie Qu Shi Pin ,Qing Can Kao Xia Mian selectionShuo Ming undefined Fou
leftSelectionComponent react element selectionZuo Bian Zu Jian Wu Fou
rightSelectionComponent react element selectionYou Bian Zu Jian Wu Fou
LoadingMessageComponent react element loadingEr Wai Xin Xi Zu Jian

props.LoadingMessageComponent

Zhe Ge Zu Jian You San Ge Gu Ding props,Mu Qian Zhe Ge Zu Jian ,Zhi You Zhong Lian Zhuang Tai De .

props Shuo Ming
count Zhong Lian Ci Shu
type Lei Xing ,Mu Qian Zhi You reloadLei Xing
loadingMessage Mo Ren De loading messageWen An
function LoadingMessageComponent(props) {
return <span>Chao Shi Di {props.count}Ci Zhong Lian Zhong ...span>;
}

<Html5Player
file="/test.mp4"
LoadingMessageComponent={<LoadingMessageComponent/>}
/>

props.controls

controls Mo Ren Wei true.

controls Mo Ren Zhi Shuo Ming
timeSlider true Bo Fang Jin Du Kong Zhi Tiao (Zhi Bo Mei You )
playPause true Kai Shi Zan Ting An Niu
volume true Yin Liang An Niu
time true Bo Fang Shi Jian (Zhi Bo Mei You )
setting false Pei Zhi (Bo Fang Su Du Deng )
speed false Bo Fang Su Du
subtitle true Ru Guo You Zi Mu Mo Ren Xian Shi
pictureQuality true Qing Xi Du (Mu Qian Zhi Zhi Chi hls.jsXie Yi De ),Ru Guo Dang Qian m3u8Bao Han Qing Xi Du Xin Xi
rotate false Xuan Zhuan (Ni Shi Zhen ,Mei Ci Zeng Jia 90Du )
capture false Jie Ping ,Jie Ping Gong Neng Cun Zai Kua Yu Wen Ti ,Suo Yi Xu Yao Hou Duan Chu Li Kua Yu Xiang Ying Tou .

controls=trueShi ,Shang Mian controls Can Shu Mo Ren Zhi Wei true De Du Hui Xian Shi ,controls=falseKong Zhi Tiao Yin Cang .

controls={ timeSlider: false }Shi ,timeSlider Yin Cang ,Qi Ta An Niu An Mo Ren Zhi Zhan Shi .

controls Huan Ke Yi Zi Ding Yi controlbar An Niu ,Li Ru Zi Ding Yi Xia Zai An Niu :

<Html5Player
file="https://media.w3.org/2010/05/sintel/trailer.mp4"
controls={{
dowload: (
<a className="float-right" href={file} target="_blank" download={file}>
<svg className="nan-icon" aria-hidden="true">
<use xlinkHref="#icon-download" />
svg>
a>
),
}}
/>

props.tracks

tracks[] Mo Ren Zhi Shuo Ming Bi Tian
kind Wu Lei Xing ,Mu Qian Zhi You subtitleHe thumbnail Shi
file Wu web vttWen Jian Lian Jie Shi
label Wu subtitleLie Biao De Zhan Shi Ming Shi

  • Zi Mu

    Zi Mu Shi Ke Yi Shi Lie Biao De .

    "><Html5Player
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    tracks={[
    {
    kind: 'subtitle',
    file: '/subtitle-zh-cn.vtt',
    label: 'Zhong Wen ',
    },
    {
    kind: 'subtitle',
    file: '/subtitle-en.vtt',
    label: 'English',
    },
    ]}
    />

  • Suo Lue Tu

    "><Html5Player
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    tracks={[
    {
    kind: 'thumbnail',
    file: '/thumbnail.vtt',
    },
    ]}
    />

props.fragment

Shi Pin Duan Pian Gong Neng ,Bi Jiao Te Shu De Yi Ge Gong Neng ,Zhe Chong Qing Kuang Bi Jiao Shao Yong . Zui Gua He Yong Zai m3u8,Yin Wei m3u8 Shi Wen Ben ,Ke Yi Hen Jian Dan De He Bing Fen Duan De Shi Pin .

<Html5Player
file="https://media.w3.org/2010/05/sintel/movie.m3u8"
fragment="/fragment.json"
/>

Huo Zhe

"><Html5Player
file="https://media.w3.org/2010/05/sintel/movie.m3u8"
fragment={{
total: {
begin: '2017-10-03 00:00:00',
end: '2017-10-03 00:01:19',
},
fragments: [
{
begin: '2017-10-03 00:00:02',
end: '2017-10-03 00:00:12',
},
{
begin: '2017-10-03 00:00:32',
end: '2017-10-03 00:00:42',
},
{
begin: '2017-10-03 00:00:45',
end: '2017-10-03 00:00:52',
},
],
}}
/>

fragment Ding Yi Ru Xia :

{
"total": {
"begin": "2017-10-03 00:00:00",
"end": "2017-10-03 00:01:19"
},
"fragments": [
{
"begin": "2017-10-03 00:00:02",
"end": "2017-10-03 00:00:12"
},
{
"begin": "2017-10-03 00:00:32",
"end": "2017-10-03 00:00:42"
},
{
"begin": "2017-10-03 00:00:45",
"end": "2017-10-03 00:00:52"
}
]
}
Can Shu Lei Xing Shuo Ming
total.begin string Zheng Ge Shi Pin De Kai Shi Shi Jian ,Ge Shi Wei YYYY-MM-DD HH:mm:ss
total.end string Zheng Ge Shi Pin De Jie Shu Shi Jian ,Ge Shi Wei YYYY-MM-DD HH:mm:ss
fragments[].begin string Shi Pin Duan Pian De Kai Shi Shi Jian ,Ge Shi Wei YYYY-MM-DD HH:mm:ss
fragments[].end string Shi Pin Duan Pian De Jie Shu Shi Jian ,Ge Shi Wei YYYY-MM-DD HH:mm:ss

props.selection

Xu Yao Pei He fragments

Can Shu Lei Xing Shuo Ming Bi Tian
begin number Jie Qu Kai Shi Shi Jian ,Dan Wei Miao Fou
total.end number Jie Qu Jie Shu Shi Jian ,Dan Wei Miao Fou
minGap number Zui Xiao De Jian Ju ,Dan Wei Miao Fou
maxGap number Zui Da De Jian Ju ,Dan Wei Miao Fou

props.logo

  • string

    Zhe Chong Qing Kuang ,Dian Ji logo Wu Tiao Zhuan .

    <Html5Player
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    logo="/logo.png"
    />

  • object

    Zhe Chong Qing Kuang ,Dian Ji logo Wu Tiao Zhuan .

    "><Html5Player
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    logo={{
    image: '/logo.png',
    link: 'https://github.com/dog-days/html5-player',
    }}
    />

  • React.element

    Zhe Chong Qing Kuang ,Dian Ji logo Wu Tiao Zhuan .

    <Html5Player
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    logo={
    <a href="https://github.com/dog-days/html5-player">
    <img src="/logo.png" />
    a>
    }
    />

props.localization

Mo Ren Zhi Wei :

//Yi Bu Jia Zai hlsHuo flvDai Ma ,Cai Hui Ti Shi Bo Fang Qi Jia Zai Zhong .
{
loadingPlayerText: 'Bo Fang Qi Jia Zai Zhong ...',
unknownError: 'Shi Pin Jia Zai Chu Cuo ',
fileCouldNotPlay: 'Shi Pin Jia Zai Chu Cuo ',
timeout: 'Shi Pin Jia Zai Chao Shi ',
speed: 'Bei Su ',
normalSpeed: 'Zheng Chang ',
videoNotSupport: 'Dang Qian Liu Lan Qi Bu Zhi Chi Ci Shi Pin Ge Shi ',
}

props.contextMenu

  • boolean

    Shi Fou Zhan Shi contextMenu,trueShi ,Zhan Shi Mo Ren De contextMenu.

    <Html5Player
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    contextMenu={false}
    />

  • array

    Zhe Chong Qing Kuang ,Gua He Yong Yu Zhan Shi Duo Ge ,Zhan Shi Yang Shi Ye Shi Yong Mo Ren De .

    <Html5Player
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    contextMenu={[<a href="#demo">demoa>, <a href="#demo2">demo2a>]}
    />

  • React.element

    Ke Yi Jin Xing Zi Ding Yi Jie Gou He Yang Shi .

    <Html5Player
    file="https://media.w3.org/2010/05/sintel/trailer.mp4"
    contextMenu={
    <ul>
    <li>
    <a href="#demo">demoa>
    li>,
    <li>
    <a href="#demo2">demo2a>
    li>,
    ul>
    }
    />

props.stretching

Wan Quan Cai Yong jwplayerDe stretchingYong Fa .

  • uniform

    Gua He Bo Fang Qi Chi Cun ,Tong Shi Bao Chi Kuan Gao Bi .

  • exactfit

    Gua He Bo Fang Qi Chi Cun Er Bu Bao Chi Kuan Gao Bi .

  • fill

    Suo Fang He Cai Jian Shi Pin Yi Tian Chong Chi Cun ,Bao Chi Zong Heng Bi .

  • none

    Bao Chi Xian Shi Shi Pin Wen Jian De Shi Ji Chi Cun Da Xiao .

Qing Can Kao Xia Tu stretchingYong Fa .

Bo Fang Qi Shi Li Hua Dui Xiang

react Zai props.videoCallback Fan Hui Bo Fang Qi Shi Li

<Html5Player
file="/test.mp4"
videoCallback={palyer => {
//playerCan Shu Shi Shi Li Hua Hou De Bo Fang Qi
}}
/>

umd Da Bao Hou Zai primse Dui Xiang Zhong Fan Hui Bo Fang Qi Shi Li .

{ //playerCan Shu Shi Shi Li Hua Hou De Bo Fang Qi });">html5Player({
id: 'test',
file: '/test.mp4',
}).then(player => {
//playerCan Shu Shi Shi Li Hua Hou De Bo Fang Qi
});

Shu Xing

Zhe Xie Shu Xing Zhi Zhi Du .

player Shu Xing Lei Xing Shuo Ming
loading boolean Jia Zai Zhong
playing boolean Bo Fang Zhong
ended boolean Bo Fang Shi Fou Jie Shu
currentTime number Dang Qian Bo Fang Shi Jian
duration number Dang Qian Shi Pin Shi Chang
bufferTime number Shi Pin Huan Cun Shi Jian ,Dan Wei Miao
seeking boolean Shi Fou Zai seeking,timeline Dian Ji Tuo Dong Ye Shi Zai seeking,Zhe Ge Gen Yuan Sheng De You Dian Bu Yi Yang .
isError boolean Shi Pin Bo Fang Shi Fou Chu Cuo

Fang Fa

  • play()

    Bo Fang Shi Pin .

  • pause()

    Zan Ting Shi Pin Bo Fang .

  • setVolume(volume)

    Kong Zhi Yin Liang .

    Can Shu Lei Xing Shuo Ming Bi Tian
    volume number Yin Liang Da Xiao ,Zui Da Zhi Wei 100 Shi

  • setMuted(flag)

    Kong Zhi Yin Liang .

    Can Shu Lei Xing Shuo Ming Bi Tian
    flag boolean Jing Yin Kong Zhi Shi

  • replay()

    Zhong Xin Bo Fang .

  • setSeeking(percent)

    Shi Pin Bo Fang Jin Du Xuan Qu .

    Can Shu Lei Xing Shuo Ming Bi Tian
    percent number Shi Pin Bo Fang Wei Zhi ,An Bai Fen Bi Lai Suan De ,Zui Da Zhi Wei 1 Shi

  • fullscreen(flag)

    Quan Ping Huo Zhe Tui Chu Quan Ping Cao Zuo .

    Can Shu Lei Xing Shuo Ming Bi Tian
    flag boolean true Quan Ping ,false Tui Chu Quan Ping Shi

  • controlbar(flag,delayTimeToHide,onControlbarEnter)

    Kong Zhi Tiao Xian Shi Huo Zhe Yin Cang Kong Zhi .

    Can Shu Lei Xing Shuo Ming Bi Tian
    flag boolean true Xian Shi ,false Yin Cang Shi
    delayTimeToHide number Yan Shi Yin Cang Shi Jian ,Hao Miao Ji (Zhi Dui Yin Cang You Xiao ) Fou
    alwaysShowControlbar boolean Wei true Shi Qi Ta Cao Zuo Wu Fa Yin Cang controlbar Fou

  • showErrorMessage(message)

    Zhan Shi Cuo Wu Xin Xi .

    Can Shu Lei Xing Shuo Ming Bi Tian
    message string Cuo Wu Xin Xi ,Wei null Shi ,Cuo Wu Xin Xi Bu Zhan Shi . Shi

  • playbackRate(rate)

    Kong Zhi Bo Fang Su Du .

    Can Shu Lei Xing Shuo Ming Bi Tian
    rate number playbackRate Zhi Shi

  • setSelection(payload)

    payloadCan Shu Qing Can Kao Shang Mian De props.selection

    {
    begin,
    end,
    minGap,
    maxGap
    }

  • on(type, callback)

    Shi Jian Jian Kong ,Zhe Li Ke Yi Ji Cheng Suo You video DOM Shi Jian (Yong addEventlisener Bang Ding Shi Jian Yi Yang ),Tong Shi Ye Ke Yi Jian Ting html5-playerDe Zi Ding Yi Shi Jian .

    /**
    * Jian Kong Shi Jian
    * @param { string } type Shi Jian Lei Xing
    * @param { function } callback Hui Diao Han Shu
    */
    on(type, callback) {}

  • off(type)

    Yi Chu Zhi Ding Huo Zhe Bu Fen Huo Zhe Quan Bu Jian Kong Shi Jian ,Bao Gua Duo Ci Bang Ding De Shi Jian ,Dang type=undefined Yi Chu Quan Bu Shi Jian .

    /**
    * Yi Chu Zhi Ding Huo Zhe Bu Fen Huo Zhe Quan Bu Jian Kong Shi Jian ,Bao Gua Duo Ci Bang Ding De Shi Jian
    * @param { string || undefined || array } type Shi Jian Lei Xing
    */
    off(type) {}

Zi Ding Yi Shi Jian Lie Biao

Ke Yi Shi Yong Shi Li Hua Hou De Bo Fang Qi Jian Kong ,Li Ru :

player.on('loading', function(loading) {
console.log(loading);
});

  • focus

    Shu Biao Shi Fou Ju Jiao Zai Bo Fang Qi ,Shu Biao Yi Dong Dao Bo Fang Qi Huo Zhe Dian Ji Bo Fang Qi Du Hui Ju Jiao ,Jie Chu Ju Jiao Xu Yao Dian Ji Fei Bo Fang Qi De Qi Ta Di Fang .

  • loading

    Shi Jian Jia Zai Shi Jian ,Zhong Tu Yin Wei De Shi Pin Jia Zai Ye Hui Hong Fa Ci Shi Jian .

  • ready

    Shi Pin Zhun Bei Wan Cheng ,Ke Yi Bo Fang (video dom dataloaded Shi Jian Hong Fa ).

  • replay

    Shi Pin Bo Fang Jie Shu ,Dian Ji Zhong Xin Bo Fang An Niu ,Hui Hong Fa Zhong Xin Bo Fang Shi Jian .

  • volume

    Yin Liang Bian Hua Shi Jian .

  • seek

    Shi Pin Shi Jian Zhou (time-line)Tuo Dong ,Dian Ji Hong Fa .

  • fullscreen

    Quan Ping Shi Jian Hong Fa ,Bao Gua Tui Chu Quan Ping .

  • controlbar

    Shi Pin Kong Zhi Tai Xian Shi Yu Yin Cang Shi Jian .

  • reload

    Zhong Zai Shi Jian ,Zhe Ge Shi Jian Yi Ban Du Shi Shi Pin Jia Zai Hong Fa ,Chu Xian Shua Xin An Niu ,Dian Ji Hou Hong Fa .

  • error

    Zhe Ge Cuo Wu Shi Jian Shi hls Huo Zhe flv Shi Pin Jie Xi Bao Cuo Shi Hong Fa De .

  • selection

    Hong Fa selectionCao Zuo .

    player.setSelection({
    begin: 5,
    end: 70,
    seekingDisabled: true,//seekingDisabledJin Zhi seekingGong Neng ,
    });
    //Qu Xiao selection
    player.setSelection(false);

  • hlsFragmentInfo

    Fan Hui hls.js tsWen Jian De Yi Xie Xi Xin Xi ,Ke Yi Ji Suan Xia Zai Su Du He Dai Kuan .

    Can Shu Lei Xing Shuo Ming
    requestTime number tsWang Luo Qing Qiu Shi Jian ,Dan Wei Hao Miao
    duration number tsShi Chang ,Dan Wei Miao
    fileSize number tsWen Jian Da Xiao ,Dan Wei bit

Lu Xiang Li Shi Shi Pin

Zhe Ge Mo Shi Gen fragmentXiao Guo Chai Bu Duo ,Bu Guo Zhe Li Shi Duo Ge Shi Pin Lian Zai Yi Qi De (Jian Dan Li Jie :You Ge Shi Pin Bo Fang Lie Biao ).

propsYong Fa Gen Yuan Lai De playerYi Yang ,Bu Guo Duo Liao Ge props.historyList,Ran Hou props.fileBu Yong Li .

Li Zi :

); } } ">import React from 'react';
import Player from 'html5-player/libs/history';

export default class View extends React.Component {
state = {};
//Lu Xiang Duan Pian Chu Li
render() {
return (
<div className="demo-container">
<div className="player-container">
<Player
historyList={{
beginDate: '2018-07-28 00:00:00',
duration: 20 + 654 + 12 + 52 + 52 + 10 + 654 + 20,
fragments: [
{
begin: 0,
end: 20,
},
{
begin: 20,
end: 20 + 654,
file:
'https://wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/elephantsdream2.smil/playlist.m3u8?test=2',
},
{
begin: 20 + 654,
end: 20 + 654 + 12,
},
{
begin: 20 + 654 + 12,
end: 20 + 654 + 12 + 52,
file:
'https://media.w3.org/2010/05/sintel/trailer.mp4?test=2',
},
{
begin: 20 + 654 + 12 + 52,
end: 20 + 654 + 12 + 52 + 52,
file:
'https://media.w3.org/2010/05/sintel/trailer.mp4?test=3',
},
{
begin: 20 + 654 + 12 + 52 + 52,
end: 20 + 654 + 12 + 52 + 52 + 10,
},
{
begin: 20 + 654 + 12 + 52 + 52 + 10,
end: 20 + 654 + 12 + 52 + 52 + 10 + 654,
file:
'https://wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/elephantsdream2.smil/playlist.m3u8',
},
{
begin: 20 + 654 + 12 + 52 + 52 + 10 + 654,
end: 20 + 654 + 12 + 52 + 52 + 10 + 654 + 20,
},
],
}}
/>
div>
div>
);
}
}

historyListJie Gou

historyListDe Zhi Ke Yi Shi false,Zhe Yang Jiu Shi Mei You Ren He Shi Pin .

historyList Lei Xing Shuo Ming Bi Tian
begin number Dang Qian Shi Pin (Huo Zhe Duan Pian )Kai Shi Shi Jian Shi
end number Dang Qian Shi Pin (Huo Zhe Duan Pian )Jie Shu Shi Jian Shi
file string || undefined Bo Fang De Lian Jie ,Wei undefinedShi ,Dai Biao Wu Shi Pin (time-sliderZhi Hui ) Fou

Bo Fang Lie Biao

Jian Dan Li Zi

); } }">import React from 'react';
import Html5PlayerList from 'html5-player/playlist';

export default class View extends React.Component {
render() {
const playlist = [
{
title: 'test',
cover: 'https://t12.baidu.com/it/u=2991737441,599903151&fm=173&app=25&f=JPEG?w=538&h=397&s=ECAA21D53C330888369488B703006041',
file: 'https://dog-days.github.io/demo/static/react.mp4'
}
];
return (
<Html5PlayerList
playlist={playlist}
autoplay
activeItem={2}
/>
);
}
}

props

props Lei Xing Shuo Ming Mo Ren Zhi Bi Tian
playlist array Bo Fang Lie Biao Wu Shi
activeItem number Dang Qian Bo Fang De Shi Pin (1Kai Shi Suan ) 1 Fou
videoCarousel bool
number		 Shi Pin Zou Ding Shi Lun Bo ,Ke Yi She Zhi Ding Shi Jian Ge (Hao Miao ) false Fou
Qi Ta props Ji Cheng videoDe Suo You props

props.playlist

playlist[] Lei Xing Shuo Ming Mo Ren Zhi Bi Tian
title string
react element		 Biao Ti ,Fu Gai PlayerDe props.title Wu Fou
cover string Lie Biao De Zhan Shi Feng Mian Tu (Gen posterBu Yi Yang ) Wu Shi
file string Shi Pin Wen Jian ,Fu Gai PlayerDe props.file Shi
Qi Ta props Ji Cheng videoDe Suo You props