摘要:在網(wǎng)上看到好論壇類似的基本問(wèn)題,以前有申請(qǐng)白名單的,在白名單的視頻鏈接或者騰訊旗下的視頻鏈接是原生播放,否則安卓會(huì)被劫持成騰訊家的播放器播放并且默認(rèn)全屏,目前通過(guò)白名單的方法是解決不了的。
最近公司做一個(gè)視頻活動(dòng)的HTML5頁(yè)面,頁(yè)面并不復(fù)雜,但是要求視頻播放的時(shí)候不全屏。在網(wǎng)上看到好論壇類似的基本問(wèn)題,以前有申請(qǐng)白名單的,在白名單的視頻鏈接或者騰訊旗下的視頻鏈接是原生播放,否則安卓會(huì)被劫持成騰訊家的播放器播放并且默認(rèn)全屏,目前通過(guò)白名單的方法是解決不了的。還好終于找到了解決辦法,下面好好整理一下。在video標(biāo)簽中加屬性
也就是所謂的開(kāi)啟同層播放器
x5-video-player-type="h5" /*讓video開(kāi)啟同層H5播放器*/ x5-video-player-fullscreen="true" /*設(shè)置為 true 是防止橫屏*/ playsinline="true" 和 webkit-playsinline="true" /*這個(gè)屬性是ios中設(shè)置可以讓視頻在小窗內(nèi)播放*/
上面的方法試了,在ios中可以不全屏,但是在安卓的微信中打開(kāi)依然是全屏的。。。
視頻解碼視頻解碼最好用FFmpeg轉(zhuǎn)碼,可以轉(zhuǎn)mp4、mpeg、mkv....,還可以提取視頻中的音樂(lè)。
mp4轉(zhuǎn)MP4
ffmpeg -i D:Projectscat.mp4 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4
mkv轉(zhuǎn)MP4
ffmpeg -i D:Projectscat.mkv -c:v copy -c:a copy cat.mp4
提取音樂(lè)
ffmpeg -i D:Projectscat.mp4 -f mp3 -vn apple.mp3
mp4轉(zhuǎn)mpeg,視頻的寬度必須是2的倍數(shù)
ffmpeg -i D:Projectscat.mp4 -f mpeg1video -vf "crop=iw-mod(iw,2):ih-mod(ih,2)" -b 0 cat.mpg
其他使用方法可以到官網(wǎng)中查找,這里就不多介紹了。
Broadway是從其他語(yǔ)言翻譯而成,這個(gè)解碼器支持 mp4 后綴的視頻文件,有時(shí)候即使是手機(jī)拍攝的mp4格式的視頻也沒(méi)什么用,最好還是用ffmpeg再轉(zhuǎn)一下格式。視頻的地址最好是在線的地址,本地測(cè)試的時(shí)候本地視頻在iphone上播放不了。
document.querySelector("body").addEventListener("click", function() { var player = new MP4Player(new Stream("img/cat.mp4"), false, "", "auto"); player.play(); document.querySelector("#containerMP4").innerHTML = ""; document.querySelector("#containerMP4").appendChild(player.canvas); });
jsmpeg是一個(gè) MPEG1 解碼器,個(gè)人覺(jué)得代碼比較輕量。
var canvas = document.getElementById("canvas2"),off1 = true; var audio = document.getElementById("bgMusic"); $("#canvas2").on("click",function(e){ e.preventDefault(); if(off1){ off1 = false; document.querySelector("#loadWrap2").style.display = "block"; var player = new jsmpeg("img/cat.mpg", { canvas: canvas, onload : function(){ document.querySelector("#loadWrap2").style.display = "none"; player.play(); }, onfinished : function(){ off1 = true; } }); } })
以上兩種方法都可以實(shí)現(xiàn)視頻的不全屏播放,終于解決了一個(gè)大問(wèn)題,但是對(duì)于專門(mén)做視頻開(kāi)發(fā)的不知道適不適用了。
另外還有一種方法,就是將圖片轉(zhuǎn)成一個(gè)個(gè)幀了,個(gè)人覺(jué)得有點(diǎn)麻煩,但是對(duì)于短視頻來(lái)講也可以采用。麻煩的就是用工具將視頻轉(zhuǎn)成圖片了。
var imgArr = [],source = {},now2 = 0,imgNum = 0,timer=null; var canvas2 = document.querySelector("#canvas2"); var videoBox = document.querySelector(".videoBox"); var view = {w : videoBox.offsetWidth,h : videoBox.offsetHeight}; canvas2.width = view.w; canvas2.height = view.h; var ctx = canvas2.getContext("2d"); ctx.clearRect(0,0,canvas2.width,canvas2.height); var audio = document.getElementById("bgMusic"); //添加圖片進(jìn)數(shù)組 function pushImgArr (num) { document.querySelector("#loadWrap2").style.display = "block"; //播放(繼續(xù)播放) audio.play(); imgArr = []; for( var i = 0;i < num;i++ ) { imgArr.push("videoImg/"+i+".jpg"); }; imgLoad (); }; //圖片加載 function imgLoad(){ document.querySelector("#btn-play").style.display = "none"; source["src"+now2] = new Image(); source["src"+now2].src = imgArr[now2]; source["src"+now2].onload = function(){ now2 ++ ; if( now2 > imgArr.length-1 ){ //加載成功 document.querySelector("#loadWrap2").style.display = "none"; //執(zhí)行canvas渲染 movieInit() }else{ //遞歸加載 imgLoad(); }; }; }; //canvas圖片渲染 function movieInit (){ clearInterval(timer); timer = setInterval(function(){ if( imgNum == imgArr.length ){ clearInterval(timer); //停止 audio.pause(); audio.currentTime = 0; }else{ ctx.clearRect(0,0,canvas2.width,canvas2.height); ctx.drawImage(source["src"+imgNum],0,0,view.w,view.h); imgNum++; }; },60); }; //按鈕點(diǎn)擊開(kāi)始播放 document.querySelector(".playBtn2").onclick = function(){ pushImgArr(30); };
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/11056.html
摘要:參考鏈接禁止自動(dòng)播放后,有什么比較好的方法實(shí)現(xiàn)的自動(dòng)播放嗎微信自動(dòng)播放視頻可交互,設(shè)置層級(jí),無(wú)控制條,非視頻下安裝系統(tǒng)安裝使用音視頻播放和常見(jiàn)的坑處理在微信和瀏覽器中不全屏播放解決 1、問(wèn)題的提出 某一天接了個(gè)需求,需要在手機(jī)的H5頁(yè)面內(nèi)加入視頻,我開(kāi)開(kāi)心心做完,準(zhǔn)備交付的時(shí)候,問(wèn)題來(lái)了,PM想要用戶一進(jìn)入頁(yè)面,視頻就開(kāi)始播放,不需要用戶手動(dòng)點(diǎn)擊。 2、嘗試解決 加autoplay 視...
摘要:參考鏈接禁止自動(dòng)播放后,有什么比較好的方法實(shí)現(xiàn)的自動(dòng)播放嗎微信自動(dòng)播放視頻可交互,設(shè)置層級(jí),無(wú)控制條,非視頻下安裝系統(tǒng)安裝使用音視頻播放和常見(jiàn)的坑處理在微信和瀏覽器中不全屏播放解決 1、問(wèn)題的提出 某一天接了個(gè)需求,需要在手機(jī)的H5頁(yè)面內(nèi)加入視頻,我開(kāi)開(kāi)心心做完,準(zhǔn)備交付的時(shí)候,問(wèn)題來(lái)了,PM想要用戶一進(jìn)入頁(yè)面,視頻就開(kāi)始播放,不需要用戶手動(dòng)點(diǎn)擊。 2、嘗試解決 加autoplay 視...
摘要:參考鏈接禁止自動(dòng)播放后,有什么比較好的方法實(shí)現(xiàn)的自動(dòng)播放嗎微信自動(dòng)播放視頻可交互,設(shè)置層級(jí),無(wú)控制條,非視頻下安裝系統(tǒng)安裝使用音視頻播放和常見(jiàn)的坑處理在微信和瀏覽器中不全屏播放解決 1、問(wèn)題的提出 某一天接了個(gè)需求,需要在手機(jī)的H5頁(yè)面內(nèi)加入視頻,我開(kāi)開(kāi)心心做完,準(zhǔn)備交付的時(shí)候,問(wèn)題來(lái)了,PM想要用戶一進(jìn)入頁(yè)面,視頻就開(kāi)始播放,不需要用戶手動(dòng)點(diǎn)擊。 2、嘗試解決 加autoplay 視...
閱讀 1776·2021-11-11 11:02
閱讀 1679·2021-09-22 15:55
閱讀 2482·2021-09-22 15:18
閱讀 3487·2019-08-29 11:26
閱讀 3742·2019-08-26 13:43
閱讀 2646·2019-08-26 13:32
閱讀 896·2019-08-26 10:55
閱讀 964·2019-08-26 10:27