如何制作一個完美的全屏視頻H5

在前面的話：

最近一波H5廣告火爆整個互聯網圈，身為圈內人，我們怎能不！知！道！

:( 噓！真不知道的也繼續看下去，有收獲 ↓ ）

So，搞懂這個并不難。

這篇文章將帶你從頭到尾了解H5廣告的實現。

本文主要講一下幾個關鍵點

一、視頻內聯播放。

-- 想要營造一種文字與視頻混排的現象，視頻不要影響其他模塊

二、視頻去控件。

-- 交互視頻，不能點擊快/慢進或暫停哦

三、去控件全屏播放。

-- 想要模擬明星給我打電話的體驗，不能看到明顯的視頻播放器

四、視頻自動播放。

-- 想要釋放用戶操作，打開鏈接就自動播放

五、黑屏問題。

-- 開始播放時，有一段黑屏時間，不能無縫銜接

六、其他屬性和方法。

-- 喜歡一個技術，就要了解“她”的全部，這些你也看看唄

一、video 標簽內聯播放

Video 標簽內聯播放，需要添加屬性：

webkit-playsinline="true" playsinline=“true”

通過上述代碼可以達到蘋果手機非全屏（內聯）播放的效果，安卓上退出全屏后也可以通過底部的播放按鈕非全屏播放。

而在 iphone上默認是全屏播放的。

需要在 Obj-C 里，webview設置allowsInlineMediaPlayback屬性為YES
webview.allowsInlineMediaPlayback = YES;

這個需要客戶端的同學注意一下。

iOS 10 之前的版本支持 webkit-playsinline，但是加了這個屬性后，在 iOS 9 上出現只能聽到聲音不能看到畫面的問題。

為了兼容ios8、9 需要再加上這個庫 iphone-inline-video 一起使用。

[https://github.com/bfred-it/iphone-inline-video]

這里補充一下 iphone-inline-video 使用方法：

1.npm install --save iphone-inline-video

2.使用

iphone-inline-video在iOS 10上會自動禁用。

確保你使用這個playsinline屬性。

二、播放視頻去控件

實現上圖效果，可添加CSS:

此方法僅適用于非全屏下去掉控件。

三、去控件全屏播放

實現去控件全屏播放步驟：

1、全屏實現：將video視頻寬高設置為 100% （全屏）

2、去控件參照上面說的第二步

當然，如果想要實現真正的全屏（頂部的導航消失），針對x5內核的可以使用同層播放器。

新版的 TBS 內核（>=036849）支持同層播放器的視頻播放器，且不需要申請白名單。

只需給 video 設置兩個屬性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"，播放效果自然服帖，效果如上圖。

四、視頻自動播放

設置屬性 autoplay

But , Android始終不能自動播放，需要手動調用：

開發中，遇到一個問題，在微信中始終無法實現自動播放，因為IOS和微信都是要求用戶有操作后才能自動播放影音視頻。

這里，找到了一個hack方法：

微信中，可以監聽 WeixinJSBridgeReady 事件，來實現視頻的自動播放

五、黑屏問題

ios 在播放視頻時，會出現短暫的黑屏（透屏），再正常顯示。

為了避免不正常顯示，我們可以這樣做：

在視頻上層覆蓋一個使用視頻第一幀的圖片填充的“div 塊”，制造播放假象。然后監聽事件 timeupdate ，視頻播放有畫面時移除這個“div塊”

六、常用屬性和事件

video 支持的屬性和事件很多，但在有些屬性和事件在不同的系統上跟預想的表現不一致，在嘗試比較之后，以下基本可以滿足需求：

1、autoplay 屬性

<video autoplay="true" />

設置此屬性，視頻將自動播放。

2、preload 屬性

<video preload="auto” />

規定是否預加載視頻。

可能的值：

* auto - 當頁面加載后載入整個視頻

* meta - 當頁面加載后只載入元數據

* none - 當頁面加載后不載入視頻

如果設置了 autoplay 屬性，則忽略該屬性。

3、timeupdate 事件

監聽音頻/視頻（audio/video）的播放位置發生改變時觸發。通常與 video.currentTime 一同使用

4、ended 事件

監聽視頻播放結束

后記：

網上關于video介紹的文章也挺多，通過搜集和自己的開發經驗，這里整理了一些問題：

因為視頻是一邊播放一邊加載，因此不但視頻的大小會影響加載體驗，視頻的清晰度對加載體驗影響更大。
建議視頻1S平均大小范圍控制在0.09~0.17M
視頻格式建議使用mp4
如果在android 環境中，想要隱藏 video 播放器，style屬性這樣寫：{ position: relative; display: none; z-index: -1; }

參考資料：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
https://x5.tencent.com/tbs/guide/video.html

作者:大轉轉 - 張穎

來源:微信公眾號:大轉轉FE

出處:https://mp.weixin.qq.com/s/Bz8Ra1coFirSnwsqacifVw

家好，我是大澈！

本文約 700+ 字，整篇閱讀約需 1 分鐘。

每日分享一段優質代碼片段。

今天分享一段 CSS 代碼片段，使用 CSS 設置網頁全屏背景圖片，很簡單。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！

html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 適用于舊版 WebKit 瀏覽器 */
-moz-background-size: cover; /* 適用于舊版 Firefox 瀏覽器 */
-o-background-size: cover; /* 適用于舊版 Opera 瀏覽器 */
}

分享原因

這段代碼展示了如何使用 CSS 設置網頁全屏背景圖片，使其在不同瀏覽器中都能完美適應屏幕尺寸。

這對于創建具有視覺吸引力且兼容性良好的網頁非常重要。

代碼解析

1. background: url('images/bg.jpg') no-repeat center center fixed;

background：簡寫屬性，用于設置所有背景屬性。

url('images/bg.jpg')：指定背景圖像的路徑。

no-repeat：背景圖像不重復顯示。

center center：背景圖像在水平方向和垂直方向都居中顯示。

fixed：背景圖像固定在視口中，即使頁面滾動，背景圖像也不會移動。

2. background-size: cover;

background-size: cover：使背景圖像按比例縮放，以完全覆蓋背景區域。這意味著圖像可能會被裁剪以適應容器。

3. 瀏覽器前綴的使用

-webkit-background-size：適用于舊版 WebKit 瀏覽器（如舊版 Safari 和 Chrome）。

-moz-background-size：適用于舊版 Firefox 瀏覽器。

-o-background-size：適用于舊版 Opera 瀏覽器。

這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現代瀏覽器大多已經支持標準的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。

- end -

么是全屏布局

全屏布局就是指 HTML 頁面鋪滿整個瀏覽器窗口, 并且沒有滾動條。而且還可以跟隨瀏覽器的大小變化而變化。

在線咨詢

上一篇：因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距離
下一篇：到底什么才是HTML5手機站

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何制作一個完美的全屏視頻H5

您的項目需求