本發(fā)明涉及移動(dòng)互聯(lián)網(wǎng)領(lǐng)域，特別涉及一種基于移動(dòng)web平臺(tái)上自動(dòng)播放視頻圖像的方法。
背景技術(shù)：
近年來，隨著移動(dòng)互聯(lián)網(wǎng)和HTML5的快速發(fā)展，越來越多的web頁面開始嵌入視頻以增加用戶互動(dòng)和閱讀內(nèi)容。
在當(dāng)前移動(dòng)終端的瀏覽器中播放視頻，存在著以下兩個(gè)問題：
(1)瀏覽器會(huì)自動(dòng)強(qiáng)制全屏幕播放視頻，且無法通過技術(shù)手段在非全屏模式下播放。
(2)瀏覽器會(huì)強(qiáng)制要求用戶確認(rèn)后才能播放視頻，且無法通過技術(shù)手段實(shí)現(xiàn)自動(dòng)播放。
由于這兩項(xiàng)限制，導(dǎo)致視頻無法直接在頁面上自動(dòng)播放，同時(shí)頁面內(nèi)容也無法與視頻進(jìn)行互動(dòng)，例如彈幕、彈窗等。一些基于視頻播放的互動(dòng)廣告展示效果將大打折扣。
技術(shù)實(shí)現(xiàn)要素：
本發(fā)明的目的在于克服現(xiàn)有技術(shù)的缺點(diǎn)與不足，提供一種基于移動(dòng)web平臺(tái)上自動(dòng)播放視頻圖像的方法。
本發(fā)明的目的通過以下的技術(shù)方案實(shí)現(xiàn)：
一種基于移動(dòng)web平臺(tái)上自動(dòng)播放視頻圖像的方法，包含以下步驟：
S1、獲取整個(gè)或是一部分視頻，通過視頻抓圖工具按照幀速率將視頻轉(zhuǎn)碼為對(duì)應(yīng)的多張圖片，根據(jù)實(shí)際情況設(shè)置視頻抓圖工具的參數(shù)，所述視頻抓圖工具的參數(shù)用于進(jìn)行幀頻的大小與拆分下來圖片尺寸的選擇；
S2、將視頻所生成的多張圖片用圖片合成工具拼合成一張大圖片；合成的圖片尺寸大小應(yīng)該與拆分下來的圖片尺寸大小一樣；
S3、瀏覽器獲取到該大圖片，并初始化畫布接口(canvas api)與定時(shí)器；開始加載時(shí)，設(shè)置整個(gè)錄屏流程需要的總時(shí)間，以毫秒為單位進(jìn)行記錄，設(shè)置關(guān)鍵位置(例如：當(dāng)游戲運(yùn)行到此處時(shí)，當(dāng)前畫面時(shí)，進(jìn)行暫停，進(jìn)行其他操作)，到達(dá)該關(guān)鍵位置時(shí)，進(jìn)行操作(例如暫停，畫面停止)，同時(shí)操作的時(shí)間暫停，當(dāng)此時(shí)暫停的時(shí)間值不變，進(jìn)行外部操作，操作完成之后，得到之前時(shí)間值，以此時(shí)間值為基礎(chǔ)，再次進(jìn)行自動(dòng)播放視頻圖像；以此類推進(jìn)行流程操作；
S4、根據(jù)外部的指令操作，按照播放速度、順序與起始位置，將大圖片特定區(qū)域繪制到頁面的畫布(canvas)中進(jìn)行播放；
S5、當(dāng)大圖片所有區(qū)域都繪制完成時(shí)，則說明視頻已經(jīng)播放完成，畫面可設(shè)置停留在指定的位置，然后清除定時(shí)器，整個(gè)互動(dòng)已完成。
步驟S1中，所述視頻抓圖工具優(yōu)選為ffmpeg工具。ffmpeg工具的優(yōu)勢功能強(qiáng)大，易操作，并且跨操作系統(tǒng)，包括Windows、Mac OS X等。
步驟S2中，所述圖片合成工具為Montage Guide。
所述圖片合成工具能夠進(jìn)行以下操作：
調(diào)整(允許更改的圖像大小)、裁剪(可以裁剪圖像的區(qū)域)、文本(用于題寫圖像設(shè)計(jì))、分離(允許從背景中分離對(duì)象并將其存儲(chǔ)隨后轉(zhuǎn)移到另一張照片上)、應(yīng)用背景效果、粘貼對(duì)象(將一個(gè)分離的圖像粘貼到另一張照片)、智能刪除(刪除對(duì)象而沒有痕跡)、智能尺寸(更改圖像大小，刪除"不必要"的部分同時(shí)保持"重要"特征完好無缺)、智能修補(bǔ)(允許從圖像中一個(gè)區(qū)域修補(bǔ)到另一個(gè)區(qū)域)。依次進(jìn)行上述操作能夠?qū)⒁曨l所生成的單張圖片拼合成一張大圖片；合成的圖片尺寸(如長、寬)大小應(yīng)該與拆分下來的圖片尺寸(如長、寬)大小為一致大?。徊鸱窒聛淼膱D片尺寸已同設(shè)備尺寸，適配好，避免錯(cuò)亂，保持一致。
根據(jù)經(jīng)驗(yàn)若移動(dòng)設(shè)備系統(tǒng)為iOS9.0以下，需要把整個(gè)拆分下來的圖片拼接合成幾塊連續(xù)的圖片，防止設(shè)備在此系統(tǒng)下畫質(zhì)模糊不清楚。
步驟S4中，所述播放的過程中還具有暫?；蛘呃^續(xù)播放功能。具有暫停或者繼續(xù)播放功能以便同用戶進(jìn)行深度互動(dòng)操作。
本發(fā)明與現(xiàn)有技術(shù)相比，具有如下優(yōu)點(diǎn)和有益效果：
1、本發(fā)明能夠解決用戶手動(dòng)觸發(fā)web視頻播放、強(qiáng)制全屏播放導(dǎo)致用戶體驗(yàn)下降，無法進(jìn)行更多基于視頻的互動(dòng)交互方案。本發(fā)明不需要用戶手動(dòng)觸發(fā)播放和強(qiáng)制全屏，提高用戶體驗(yàn)與互動(dòng)效果。
2、本發(fā)明通過將視頻轉(zhuǎn)換為圖片集合的方法，能夠根據(jù)具體情況，選擇是否自動(dòng)或者手動(dòng)播放視頻內(nèi)容，能夠根據(jù)視頻的播放參數(shù)(速度、順序、起始位置等)，控制視頻的播放。同時(shí)在播放過程中，能夠利用畫布相關(guān)接口使視頻和用戶進(jìn)行深度互動(dòng)。
附圖說明
圖1為本發(fā)明所述一種基于移動(dòng)web平臺(tái)上自動(dòng)播放視頻圖像的方法的流程圖。
具體實(shí)施方式
下面結(jié)合實(shí)施例及附圖對(duì)本發(fā)明作進(jìn)一步詳細(xì)的描述，但本發(fā)明的實(shí)施方式不限于此。
實(shí)施例一
如圖1，一種基于移動(dòng)web平臺(tái)上自動(dòng)播放視頻圖像的方法，包含以下步驟：
一種基于移動(dòng)web平臺(tái)上自動(dòng)播放視頻圖像的方法，包含以下步驟：
S1、獲取整個(gè)或是一部分視頻，通過視頻抓圖工具按照幀速率將視頻轉(zhuǎn)碼為對(duì)應(yīng)的多張圖片，根據(jù)實(shí)際情況設(shè)置視頻抓圖工具的參數(shù)，所述視頻抓圖工具的參數(shù)用于進(jìn)行幀頻的大小與拆分下來圖片尺寸的選擇；
S2、將視頻所生成的多張圖片用圖片合成工具拼合成一張大圖片；合成的圖片尺寸大小應(yīng)該與拆分下來的圖片尺寸大小一樣；
S3、瀏覽器獲取到該圖片，并初始化畫布接口(canvas api)與定時(shí)器；開始加載時(shí)，設(shè)置整個(gè)錄屏流程需要的總時(shí)間，以毫秒為單位進(jìn)行記錄，設(shè)置關(guān)鍵位置(例如：當(dāng)游戲運(yùn)行到此處時(shí)，當(dāng)前畫面時(shí)，進(jìn)行暫停，進(jìn)行其他操作)，到達(dá)該關(guān)鍵位置時(shí)，進(jìn)行操作(例如暫停，畫面停止)，同時(shí)操作的時(shí)間暫停，當(dāng)此時(shí)暫停的時(shí)間值不變，進(jìn)行外部操作，操作完成之后，得到之前時(shí)間值，以此時(shí)間值為基礎(chǔ)，再次進(jìn)行自動(dòng)播放視頻圖像；以此類推進(jìn)行流程操作；
S4、根據(jù)外部的指令操作，按照播放速度、順序與起始位置，將大圖片特定區(qū)域繪制到頁面的畫布(canvas)中進(jìn)行播放；
S5、當(dāng)大圖片所有區(qū)域都繪制完成時(shí)，則說明視頻已經(jīng)播放完成，畫面可設(shè)置停留在指定的位置，然后清除定時(shí)器，整個(gè)互動(dòng)已完成。
步驟S1中，所述視頻抓圖工具優(yōu)選為ffmpeg工具。ffmpeg工具的優(yōu)勢功能強(qiáng)大，易操作，并且跨操作系統(tǒng)，包括Windows、Mac OS X等。
步驟S2中，所述圖片合成工具為Montage Guide。
所述圖片合成工具能夠進(jìn)行以下操作：
調(diào)整(允許更改的圖像大小)、裁剪(可以裁剪圖像的區(qū)域)、文本(用于題寫圖像設(shè)計(jì))、分離(允許從背景中分離對(duì)象并將其存儲(chǔ)隨后轉(zhuǎn)移到另一張照片上)、應(yīng)用背景效果、粘貼對(duì)象(將一個(gè)分離的圖像粘貼到另一張照片)、智能刪除(刪除對(duì)象而沒有痕跡)、智能尺寸(更改圖像大小，刪除"不必要"的部分同時(shí)保持"重要"特征完好無缺)、智能修補(bǔ)(允許從圖像中一個(gè)區(qū)域修補(bǔ)到另一個(gè)區(qū)域)。依次進(jìn)行上述操作能夠?qū)⒁曨l所生成的單張圖片拼合成一張大圖片；合成的圖片尺寸(如長、寬)大小應(yīng)該與拆分下來的圖片尺寸(如長、寬)大小為一致大??；拆分下來的圖片尺寸已同設(shè)備尺寸，適配好，避免錯(cuò)亂，保持一致。
根據(jù)經(jīng)驗(yàn)若移動(dòng)設(shè)備系統(tǒng)為iOS9.0以下，需要把整個(gè)拆分下來的圖片拼接合成幾塊連續(xù)的圖片，防止設(shè)備在此系統(tǒng)下畫質(zhì)模糊不清楚。
步驟S4中，所述播放的過程中還具有暫?；蛘呃^續(xù)播放功能。具有暫停或者繼續(xù)播放功能以便同用戶進(jìn)行深度互動(dòng)操作。
實(shí)施例二
具體到游戲試玩體驗(yàn)，一種基于移動(dòng)web平臺(tái)上自動(dòng)播放視頻圖像的方法，包含以下步驟：
(1)游戲是按照iphone6和iphone6s屏幕尺寸為基準(zhǔn)屏幕進(jìn)行錄制，視頻尺寸也以以上尺寸為基礎(chǔ)，此尺寸為最佳，可向上向下進(jìn)行兼容，以此來兼容iphone5、iphone5s和iphone6 plus、iphone6s plus屏幕尺寸，然后將游戲試玩視頻按照特定需求轉(zhuǎn)碼成響應(yīng)的圖片集合(若是ipad尺寸，建議換重新匹配素材尺寸，保證游戲清晰度)。
(2)將響應(yīng)的圖片合集拼接成一張大圖片，進(jìn)行操作，對(duì)游戲試玩的關(guān)鍵幀進(jìn)行確認(rèn)并編寫對(duì)應(yīng)的響應(yīng)動(dòng)作(比如暫停繼續(xù)播放游戲、循環(huán)部分場景等)。
(3)由于此互動(dòng)是采用通過視頻分拆下來圖片，之后在根據(jù)需要合成單個(gè)或者是多個(gè)大圖片，此時(shí)圖片大小相對(duì)來對(duì)比，比較大，對(duì)與后期的加載與用戶體驗(yàn)不方便，在互動(dòng)之前應(yīng)先進(jìn)行預(yù)加載把所需要的資源縣加載出來，以便互動(dòng)體驗(yàn)，防止出現(xiàn)卡頓等不良現(xiàn)象(由于是在移動(dòng)端中去操作，整體資源大小最好保持在3M-4M)。
(4)活動(dòng)游戲的預(yù)先加載完成之后，根據(jù)播放時(shí)間進(jìn)行相應(yīng)的響應(yīng)游戲動(dòng)作，并觸發(fā)暫停視頻播放、回放跳轉(zhuǎn)到某一幀以及循環(huán)部分場景等動(dòng)作，此間進(jìn)行的操作設(shè)置，找到關(guān)鍵幀，與之相對(duì)應(yīng)的時(shí)間進(jìn)行處理，當(dāng)所需要的流程進(jìn)行完畢之后，要進(jìn)行定時(shí)器的清除。
上述實(shí)施例為本發(fā)明較佳的實(shí)施方式，但本發(fā)明的實(shí)施方式并不受上述實(shí)施例的限制，其他的任何未背離本發(fā)明的精神實(shí)質(zhì)與原理下所作的改變、修飾、替代、組合、簡化，均應(yīng)為等效的置換方式，都包含在本發(fā)明的保護(hù)范圍之內(nèi)。