搜尋
首頁web前端H5教程H5開發影片遇到的問題及解決方案

H5開發影片遇到的問題及解決方案

Feb 28, 2018 pm 02:18 PM
html5解決方案問題

最近做了一些嵌入影片的活動,累積了點影片的經驗,下面記錄別人和自己踩過的坑以及相應的解決方案。
1、碰到問題和解決方案
1.1、ios 網頁中播放影片預設全螢幕(點擊影片會彈出播放器進行全螢幕播放)。
解決不全螢幕播放可以加入下列屬性webkit-playsinline='true' 和 playsinline='true' 如果設定上面屬性還沒有效果,那麼可以再配合下面這個外掛來試試。 iphone-inline-video
備註:ios下在微博中開啟網頁播放影片會彈出播放器播放,設定playsinline屬性無效,還必須使用上面那個插件,親測有效。
1.2、andriod中video播放完後顯示推薦影片
行動裝置瀏覽器中的video元素是比較特別的,早期無論是在iOS或Android的瀏覽器中,它都位於頁面的最頂層,無法被遮蓋。後來這個問題在iOS下得到了解決,但是Android的瀏覽器則是問題依舊。 X5是騰訊基於Webkit開發的渲染引擎,它提供了一種名為「同層播放器」的特殊video元素以解決遮蓋問題。透過設定

x5-video-player-type="h5" 可以开启同层播放器,来避免播放后显示推荐视频的问题。
x5-video-player-fullscreen="true" //视频全屏播放
x5-video-orientation="portrait"//视频竖屏模式播放

1.3、視頻的適配
目前設計師一般是按照iphone5或iphone7的標準去設計視頻,一般可以透過寬高100%來播放視頻,如果發現影片還是不行那麼就需要根據實際情況設定object-fit屬性來解決了。 詳見半深入理解CSS3 object-position/object-fit屬性
備註:在webkit核心瀏覽器下,預設為object-fit:contain。
1.4、js控制視頻的播放
在ios中視頻和音頻一般都不會主動播放,除非用戶主動去點擊,所以需要通過js來監聽界面的交互來控制視頻的播放。
影片的播放和暫停主要是呼叫play和pause方法。 而影片播放過程中如果需要一些使用者的互動主要是透過timeupdate方法來監聽目前的播放時間,看一段程式碼:

var isStop = false;
    videoElem.on('timeupdate', function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//该时间点展示交互蒙层
            $('.js_first_stop').removeClass('hide');
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解决ios暂停后再次点击播放不了问题,因为该处触发了多次,但是andriod没有该问题。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $('.js_second_stop').removeClass('hide');
        }
    });

在ios中監聽timeupdate事件並暫停的影片的時候需要引入一個全域的isStop變量,不然下次點擊繼續播放的時候沒反應(timeupdate的時候觸發了多次暫停),但是andriod是沒有這個問題的。 判斷影片結束可以監聽影片的ended事件

videoElem.on('ended',function(){});

或監聽影片的timeupdate事件,然後判斷ended屬性,若為true則表示結束,false表示未結束。

videoElem.on('timeupdate',function(){
   if(videoElem[0].ended){
    //播放结束
   }
}

另外在andriod端開啟了同層播放器,微信端也提供了2個監聽進入同層播放器和退出同層播放器的事件。 進入同層播放器事件(開始播放影片)。

videoElem.on("x5videoenterfullscreen", function(){}

點選左上角返回鍵退出同層播放器。

videoElem.on('x5videoexitfullscreen',function(){}

最後要注意的是在andriod端播放影片後是不會主動退出同層播放器的。後續如果有展示的介面,也會在播放器中展示,感覺很怪。這裡可以透過連結跳轉來解決。
1.5、canvas播放視頻
canvas可以播放視頻,但是在某些andriod機上會看到有很嚴重的鋸齒,並且有些andriod瀏覽器播放的時候只有聲音而沒有圖像。
1.6、視訊編碼
mp4格式的影片要h.264編碼方式,不然某些ios只有聲音而沒有影像。
最後,一個完整的video配置的如下,僅供參考

<video playsinline="true"></video>

相關推薦:

H5同層Video播放器存取實例分享

H5混合開發app如何升級

HTML5音訊與視訊問題及解決方法

以上是H5開發影片遇到的問題及解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
H5和HTML5:網絡開發中常用的術語H5和HTML5:網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西,即HTML5。 HTML5是HTML的第五個版本,帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能,提升了網頁的表現力和交互性。

H5指的是什麼?探索上下文H5指的是什麼?探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:工具,框架和最佳實踐H5:工具,框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

HTML5的遺產:當前了解H5HTML5的遺產:當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼:可訪問性和語義HTMLH5代碼:可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構,提高SEO。 2.ARIA屬性如aria-label增強可訪問性,輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎?H5與HTML5相同嗎?Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的,但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準,包含新標籤和API。 2."h5"通常是HTML5的簡稱,但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼?H5的功能是什麼?Apr 07, 2025 am 12:10 AM

H5,即HTML5,是HTML的第五個版本,它為開發者提供了更強大的工具集,使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括:1)元素允許在網頁上繪製圖形和動畫;2)語義化標籤如、等,使網頁結構清晰,利於SEO優化;3)新API如GeolocationAPI,支持基於位置的服務;4)跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

h5鏈接怎麼做h5鏈接怎麼做Apr 06, 2025 pm 12:39 PM

如何創建 H5 鏈接?確定鏈接目標:獲取 H5 頁面或應用程序的 URL。創建 HTML 錨點:使用 <a> 標記創建錨點並指定鏈接目標URL。設置鏈接屬性(可選):根據需要設置 target、title 和 onclick 屬性。添加到網頁:將 HTML 錨點代碼添加到希望鏈接出現的網頁中。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具