从零到一：微信H5视频行业实现自动播放
时间：2023-04-05 01:21:32
HTML5
鍐欏湪鍓嶉潰銆備笉鐭ヤ笉瑙夛紝宸茬粡鏄?019骞寸殑娣辩浜嗭紝娌℃兂鍒颁笂涓€绡囩殑瀛╁瓙杩樻病鍑虹敓锛岃繖绡囧凡缁忓崐宀佷簡銆傚垱涓氬吇瀛╁瓙锛屾椂闂磋繃寰楃湡蹇€傚湪杩欓噷濂夊姖澶у涓嶈杩囨棭鍒涗笟锛坓ank锛夛紝澶氬锛堝吇锛夋墠鏄疄浜嬫眰鏄€傚吋鑱岃櫧鐒朵笉鏄厤璐圭殑锛屼絾鑷冲皯鏄ǔ瀹氱殑銆傞潰瀵逛换鍔″拰涔︽湰锛岃儨杩囬潰瀵圭泩浜忋€傚簾璇濅笉澶氳锛屼笅闈㈡鏂囥€傞€氬父鏈夎姹傦紝寰俊杩涘叆H5鍚庯紝鍦ㄧ儹闂ㄧ粓绔嚜鍔ㄦ挱鏀捐棰戠殑浣撻獙瑕佸敖鍙兘淇濇寔涓€鑷淬€俇I鍙互鍙犲姞鍦ㄨ棰戜笂锛岃浆鍖栦负鎶€鏈渶姹傘€傝棰戦渶瑕佽嚜鍔ㄦ挱鏀俱€傚浣曞吋瀹筰OS鍜孉ndroid锛熷畠蹇呴』鏄湪绾挎挱鏀捐€屼笉鏄叏灞忋€俰OS濂戒竴浜涳紝瀹夊崜寰俊鐨刋5鍐呮牳灏变笉濂借В閲婁簡銆傚緢澶氫汉閮藉崱浣忎簡锛岀綉涓婃眰鍔╃殑涔熶笉鍦ㄥ皯鏁般€傛潵涓畝鍗曠殑demo鏌ョ湅demo浠撳簱鍦板潃PS锛氬井淇℃墦寮€鑷姩鎾斁銆傚叧閿唬鐮佸潡samplebarrage,鎰忔€濇槸浣犲彲浠ユ斁浠绘剰UI鍦ㄨ棰戜笂鏂?/div>
functioninitVideo(){varisAndroid=window.navigator.userAgent.match(/android/ig)if(isAndroid){//Androidvarsrc="https://static.shikehuyu.com/vincent/wx-video-demo/movie.ts"player=newJSMpeg.Player(src,{canvas:canvas,autoplay:true,progressive:false,loop:true,onVideoDecode:function(){canvas.style.display='block'canvas.style.height=80/(canvas.width/canvas.height)+"vw"}})}else{//iOSplayer=videovideo.style.display='block'}}window.onload=function(){initVideo()//鑷姩鎾斁document.addEventListener('WeixinJSBridgeReady',()=>{player.play()})}鍖哄垎iOS鍜孉ndroid鐨勫疄鐜拌鐐癸紝iOS浣跨敤鍘熺敓video鏍囩锛孉ndroid浣跨敤JSMpeg锛屽湪canvas涓婄粯鍒跺浘鐗囷紝iOS浣跨敤mp4鎴栧叾浠栧師鐢焩ideo鏍囩鏀寔鐨勮棰戞牸寮忥紝Android浣跨敤ts鏍煎紡銆傦紙ts鏍煎紡闇€瑕佺敤ffmpeg杩涜杞崲锛屼笅闈細鎻愬埌锛夌洃鍚琖eixinJSBridgeReady浜嬩欢锛岃皟鐢ㄨ棰戞挱鏀炬柟娉曪紝瀹炵幇鑷姩鎾斁銆備粈涔堟槸鐧惧害鐧剧鐨則s鏂囦欢ts鏄€淭ransportStream鈥濈殑缂╁啓銆侻PEG2-TS鏍煎紡鐨勭壒鐐规槸瑙嗛娴佺殑浠讳綍涓€娈甸兘鍙互鐙珛瑙ｇ爜銆傜畝鍗曠殑璇村氨鏄棰戞暟鎹祦銆傚皢mp4绛夋牸寮忕殑瑙嗛杞垚ts鍚庯紝鍙互閫愭鍒嗘瀽锛屽彲浠ョ敤浜庤棰戠洿鎾€侸SMpeg閫氳繃瑙ｆ瀽瑙嗛鏁版嵁锛岀劧鍚庡湪鐢诲竷涓婄粯鍒舵潵瀹炵幇瑙嗛鎾斁銆傚浣曡浆涓簍s鏍煎紡鍙傝€僇SMpeg鐨凴EADME銆傝浆鎹㈠墠闇€瑕佸畨瑁協fmpeg銆傚彲浠ュ埌ffmpeg瀹樼綉涓嬭浇锛屼篃鍙互鐢╤omebrew绛夊伐鍏峰畨瑁咃細brewinstallffmpeg鎴戠洰鍓嶅彧鏄畝鍗曡浆鎹竴涓嬶紝鍏朵粬鍙傛暟娌℃湁鐗瑰埆杈撳叆锛岃窡鐫€鏁欑▼鍚с€傜粓绔繘鍏ideo鐩綍锛岃緭鍏ュ涓嬪懡浠わ細ffmpeg-imovie.mp4-fmpegts-codec:vmpeg1video-codec:amp2-b0movie.ts韪╁潙娉?.JSMpeg鐢╪pm瀹夎鏄笉鍙敤锛岃嚜宸辨祴璇曚細鍑虹幇闆姳灞忥紝鍙兘浠庡畼缃慼ttps://jsmpeg.com/涓嬭浇锛?.progressive闇€瑕佹墜鍔ㄨ缃负false锛岄粯璁や负true锛屼細鍙戣捣澶氭璇锋眰锛屼骇鐢熼澶栫殑娴侀噺锛佹墿灞曢棶棰樺獟浣撶殑鎾斁锛屽寘鎷煶棰戝拰瑙嗛锛岄渶瑕佺敤鎴锋搷浣滄墠鑳藉湪绉诲姩绔挱鏀俱€傦紙鑰佺敓甯歌皥锛夌壒鍒槸濡傛灉瑙嗛浣跨敤video鏍囩锛屽姞涓妋uted灞炴€э紝鍗抽潤闊筹紝灏卞彲浠ヨ嚜鍔ㄦ挱鏀俱€傦紙鍙兘鏄祻瑙堝櫒鐨勫紑鍙戣€呰鏌愯壊缃戠珯绐佺劧鍝嶈捣鍚撳埌浜嗭紵馃惗锛夌粨璁哄ソ鍍忓彧鏄竴涓皬鍔熻兘瀹炵幇锛岄璁￠渶瑕?鍒嗛挓锛屽～鍧戦渶瑕?灏忔椂銆備笉鐭ラ亾鏈夋病鏈夊叾浠栨洿濂界殑瀹炵幇鏂瑰紡銆傜洰鍓嶏紝iOS浣跨敤video锛孉ndroid浣跨敤JSMpeg锛岀劧鍚庝緷闈犵洃鍚琖eixinJSBridgeReady浜嬩欢瀹炵幇绾夸笂寰俊H5瑙嗛鐨勮嚜鍔ㄦ挱鏀撅紝鏄垜鐨剆ilverbullet銆傚笇鏈涘澶у鏈夋墍甯姪锛佸叾浠栧疄鐜皒5-video-player-type="h5-page"鎰熻阿gchxp鐨勫洖澶嶏細tx浠婂勾鏂板鐨勫睘鎬5-video-player-type="h5-page"鏄拡瀵笰ndroid鐨勶紝灏辨槸鍙翰娴嬶紝闇€娴嬭瘯鍏煎鎬?/p>
