鉁ㄥ紑鍙戠殑React鎾斁鍣ㄦ彃浠跺叿鏈夊紑绠卞嵆鐢ㄧ殑楂樿川閲廟eact缁勪欢銆備娇鐢═ypeScript寮€鍙戯紝鎻愪緵瀹屾暣鐨勭被鍨嬪畾涔夋枃浠躲€傚浗闄呰瑷€鏀寔銆備富棰樸€佺粍浠躲€佸畾鍒跺姛鑳姐€傚己澶х殑API鍜屽洖璋冨嚱鏁颁綋绉皬锛?0kb鏀寔HLS锛?m3u8锛夋牸寮忥紝鏀寔H264鏍煎紡馃摝瀹夎npminstalljol-player--save馃敤绀轰緥importJoLPlayerfrom"jol-player";constApp=()=>(<>);demo妗堜緥鏂囨。灞炴€?閰嶇疆椤瑰涓嬪睘鎬ф潵鑷猳ption灞炴€ч厤缃」銆傚弬鏁拌鏄巘ype榛樿鍊紈idth瑙嗛瀹瑰櫒瀹藉害锛堝繀濉級number蹇呬紶height瑙嗛瀹瑰櫒楂樺害锛堝繀濉級number蹇呬紶videoSrc瑙嗛鍦板潃锛堝繀濉級string蹇呬紶theme涓婚瀛楃涓瞈#ffb821poster瑙嗛灏侀潰鍥惧瓧绗︿覆-setEndPlayContentCustomize瑙嗛缁撴潫鏄剧ず鐨勫唴瀹筊eact.ReactNode-setBufferContent鑷畾涔夎棰戠紦鍐插姞杞界粍浠禦eact.ReactNode-pausePlacement鏆傚仠鎸夐挳鐨勪綅缃産ottomRight,centerbottomRighthideMouseTime澶氬皯姣锛屾棤鎿嶄綔锛岄殣钘忛紶鏍囨帶鍒禗evice/msnumber2000isShowMultiple鏄惁鏄剧ず鎾斁multiplefunctionbooleantrueisShowSet鏄惁鏄剧ず璁剧疆鍑芥暟booleantrueisShowScreenshot鏄惁鏄剧ず鎴浘鍑芥暟booleantrueisShowPicture鏄惁鏄剧ず鐢讳腑鐢诲姛鑳絙ooleantrueisShowWebFullScreen鏄惁鏄剧ず缃戦〉鍏ㄥ睆booleantruelanguage璇█zh,enzhisShowPauseButton鏄惁鏄剧ず鏆傚仠鎸夐挳booleantruequality-瑙嗛璐ㄩ噺鍒楄〃-灞炴€ч€夋嫨videoType瑙嗛鎾斁鏍煎紡锛屾敮鎸乭264(.mp4,.webm,.ogg),hls(.m3u8)h264,hlsh264isToast鏄惁鏄剧ずtoastbooleanfalsetoastPositionToast浣嶇疆锛宨sToast涓簍rue鏃惰鍊兼墠鏈夋晥true,鎵嶄細鐢熸晥tp,btbt鎻愮ず锛歲ualityAttributes鎺ュ彛澹版槑濡備笅锛?***StandardDefinition360PSD*HighDefinition540PHD*UltraClear720PFHD*Blu-ray1080PBD*/exporttypequalityName='鏍囨竻'|'楂樻竻'|'鍏ㄩ珮娓?|'BD';瀵煎嚭绫诲瀷qualityKey='360P'|'540P'|'720P'|'1080P';瀵煎嚭鎺ュ彛qualityAttributes{name:T;缃戝潃锛氬瓧绗︿覆锛泒鏂规硶鍚嶆弿杩皌ypeloadreload()=>voidpausepause()=>voidplaystartplaying()=>voidsetVolume璁剧疆闊抽噺锛孾0-100](par:number)=>voidseek璁剧疆鎾斁浣嶇疆specifiedvideo(par:number)=>voidsetVideoSrc璁剧疆瑕佹挱鏀剧殑瑙嗛鍦板潃src(par:string)=>void鎻愮ず锛氫互涓婃柟娉曞彧鑳藉€熷姪ref璋冪敤锛屽锛歺xx.current.load()璇﹁demo妗堜緥鍥炶皟鍑芥暟瀵煎嚭鎺ュ彛videoAttributes{/***@description鏄惁鎾斁*/isPlay:K;/***@description褰撳墠鏃堕棿/s*/currentTime:T;/***@鎻忚堪/***@description缂撳瓨鎸佺画鏃堕棿/s*/bufferedTime:T;/***@description鏄惁寮€鍚敾涓敾*/isPictureinpicture:K;/***@descriptionvolume*/volume:T;/***@description瑙嗛鎾斁鍊嶆暟*/multiple:T;/***@description鏄惁缁撴潫*/isEndEd:K;/***@description閿欒*/閿欒锛氱┖|T;}瀵煎嚭绫诲瀷qualityKey='360P'|'540P'|'720P'|'1080P';namedescriptiontypeonProgressMouseDown婊戝姩鏉¤鎸変笅骞舵寜浣忥紝鎷栧姩鍥炶皟(e:videoAttributes)=>voidonProgressMouseUp婊戝姩鏉¤鎸変笅骞堕噴鏀炬墦寮€鍥炶皟(e:videoAttributes)=>voidonPlay瑙嗛寮€濮嬪洖璋?e:videoAttributes)=>voidonPausevideo鏆傚仠鎾斁鍥炶皟(e:videoAttributes)=>voidonTimeChange瑙嗛姝ｅ湪鎾斁锛屾椂闂村彉鍖栧洖璋?e:videoAttributes)=>voidonEndEd瑙嗛缁撴潫鍥炶皟(e:videoAttributes)=>voidonvolumechange闊抽噺鍙樺寲鍥炶皟(e:videoAttributes)=>voidonError瑙嗛鎾斁澶辫触鏃剁殑鍥炶皟()=>voidonQualityChange瑙嗛鍒嗚鲸鐜囨敼鍙樻椂鐨勫洖璋?e:callBackType)=>voidJoLPlayer鎺ユ敹鍒扮殑鍙傛暟鎺ュ彛濡備笅锛歟xportinterfacevideoparameterextendsPartial{style?:React.CSSP璐骇锛?***@description缁勪欢鐨勯厤缃」*/option:videoOption;绫诲悕锛燂細瀛楃涓诧紱ref?:JoLPlayerRef}鍦板潃椤瑰湴鍧€棰勮鍦板潃
