兩句css代碼實(shí)現(xiàn)全屏滾動(dòng)效果-demo案例

果

兩句css代碼實(shí)現(xiàn)全屏滾動(dòng)效果

html代碼

<body>
    <div class="container">
        <section>
            <h3>第一屏內(nèi)容</h3>
            <p>
                在父容器上使用scroll-snap-type 屬性 <br>
                第一個(gè)參數(shù)y 是y軸捕捉位置 <br>
                mandatory 超過距離則自動(dòng)滾動(dòng)到下一個(gè)容器 <br>
                scroll-snap-type:y mandatory <br>
 
                在需要滾動(dòng)的容器上使用 scroll-snap-align 屬性 <br>
                start 開始部分 end 結(jié)束部分 center 中間部分 <br>
                scroll-snap-align:start; <br>
            </p>
        </section>
        <section>
            <h3>第二屏內(nèi)容</h3>
            <p>
                在父容器上使用scroll-snap-type 屬性 <br>
                第一個(gè)參數(shù)y 是y軸捕捉位置 <br>
                mandatory 超過距離則自動(dòng)滾動(dòng)到下一個(gè)容器 <br>
                scroll-snap-type :y mandatory <br>
 
                在需要滾動(dòng)的容器上使用 scroll-snap-align 屬性 <br>
                start 開始部分 end 結(jié)束部分 center 中間部分 <br>
                scroll-snap-align:start; <br>
            </p>
        </section>
        <section>
            <h3>第三屏內(nèi)容</h3>
            <p>
                在父容器上使用scroll-snap-type 屬性 <br>
                第一個(gè)參數(shù)y 是y軸捕捉位置 <br>
                mandatory 超過距離則自動(dòng)滾動(dòng)到下一個(gè)容器 <br>
                scroll-snap-type :y mandatory <br>
 
                在需要滾動(dòng)的容器上使用 scroll-snap-align 屬性 <br>
                start 開始部分 end 結(jié)束部分 center 中間部分 <br>
                scroll-snap-align:start; <br>
            </p>
        </section>
    </div>
</body>

css代碼

務(wù)8：全屏模式的切換。

這張就是第八，第八小姐就是講關(guān)于全屏模式的切換。回到頁面，希望有個(gè)按鈕，一點(diǎn)全屏娛樂模式，這一點(diǎn)就切換回來?？赡芪覀€(gè)人不太喜歡這種模式，但有的人會(huì)用，還是把它設(shè)計(jì)進(jìn)去。

然后就在這個(gè)地方加一個(gè)圖標(biāo)，有空再找一下。找了一個(gè)圖標(biāo)，就找這個(gè)。jump through screen one，這有了嗎？有了，還挺好。然后就稍小了一點(diǎn)，再給它大一點(diǎn)，size，就不要說是二十，可以。點(diǎn)它，現(xiàn)在沒效果，來做這個(gè)效果。

首先給它定一個(gè)變量叫is war screen，是不是全屏的？它肯定是響應(yīng)數(shù)據(jù)了，i e f，它不是默認(rèn)，當(dāng)然響應(yīng)數(shù)據(jù)這邊可以給它添類型，比如它是birch，填birch。如果它不是，還找一個(gè)相對(duì)的，跟它相反的按鈕，收回來的按鈕，就用這個(gè)。

off for screen one，就這個(gè)，給它來復(fù)制一下，把它放松，就是衣服regan in the first three，如果它真的，就顯示上面的，否則就顯示下面的。來看一下，這邊有一個(gè)方法，就這樣可以，可能還做其他的，記得就給它定一個(gè)top切換螺絲功能，它是一個(gè)，然后再調(diào)整這個(gè)方法就行了。

就要投screen，點(diǎn)，沒效果，為啥沒效果？是不是點(diǎn)錯(cuò)了？這邊點(diǎn)這上面，再說下面一個(gè)，放到槍上，點(diǎn)，看有切換效果了。怎么樣給它切換？這個(gè)是節(jié)食里面固定的方法，如果它的值，直接給它切換，就是document，the element，點(diǎn)a request，press greet plug，就是全屏切換。

這里切換了，這點(diǎn)沒效果只按a xe，所以這邊也不對(duì)，所以希望它變成這個(gè)時(shí)候就把它縮回來，這邊就要做一個(gè)判斷了，就是來判斷它是不是已經(jīng)縮放了，如果它已經(jīng)是展開了，就把它縮回來，也是，這個(gè)就退出，否則就把它刪遠(yuǎn)，就簡(jiǎn)單的刪遠(yuǎn)，刪除就可以了。

試一下，點(diǎn)，點(diǎn)，回來了，點(diǎn)，點(diǎn)，再配合原來的一點(diǎn)，就全屏顯示了，舒服了，點(diǎn)回來。這一章就講完了，就把頁面布局都弄好了，包括動(dòng)態(tài)生成菜單頁，瀏覽歷史頁，面包穴導(dǎo)航，把整個(gè)布局就全做好了。

下一張開始做具體業(yè)務(wù)了，首先叫做用戶的登錄，注冊(cè)新用戶，還有一個(gè)重置密碼。這節(jié)課就講到這里，拜拜。

里云播放器SDK（ApsaraVideo for Player SDK）是阿里視頻云端到云到端服務(wù)的重要一環(huán)，除了支持點(diǎn)播和直播的基礎(chǔ)播放功能外，還深度融合視頻云業(yè)務(wù)，支持視頻的加密播放、安全下載、首屏秒開、低延時(shí)等業(yè)務(wù)場(chǎng)景，為用戶提供簡(jiǎn)單、快速、安全、穩(wěn)定的視頻播放服務(wù)。本文銜接上文，詳細(xì)介紹web播放器的功能及實(shí)現(xiàn)。

一、基本概況及功能

播放器架構(gòu)

Aliplayer Web播放器分為H5和Flash兩個(gè)，F(xiàn)lash播放器隨著技術(shù)的發(fā)展會(huì)逐漸被邊緣化，所以我們以后只做維護(hù)，不會(huì)更新功能了，重點(diǎn)會(huì)放在H5播放器上。H5播放器架構(gòu)主要分四層，底層H5 Video，播放能力和H5原生Video緊密相關(guān)。第二層是基礎(chǔ)播放器，它不依賴于具體業(yè)務(wù)，通過URL的方式來播放。第三層是為各種業(yè)務(wù)場(chǎng)景準(zhǔn)備的不同的播放器，可以很容易的擴(kuò)展，相互隔離不依賴。最上面一層是適配的播放器，會(huì)根據(jù)終端類型、瀏覽器類型、播放格式和用戶指定來進(jìn)行智能適配。

播放器功能

最近，我們?cè)诓シ牌鞫松弦矊?shí)現(xiàn)了截圖、國際化、變速、UI自定義、微信同層播放、自適應(yīng)播放、加密播放、H5播放flv、自定義插件等功能。后續(xù)，我們還會(huì)通過插件的形式實(shí)現(xiàn)彈幕、廣告等功能，并會(huì)開源到github上，也會(huì)支持用戶根據(jù)自己業(yè)務(wù)需求來自定義SDK包。

播放器支持視頻格式

適配播放

我們整個(gè)視頻播放的基本原則是H5優(yōu)先，能用H5播放的肯定不用Flash去播放。所以在移動(dòng)端，我們肯定是用H5來播放的，PC端也依照這個(gè)原則盡量使用H5。同時(shí)，我們會(huì)判斷瀏覽器類型支持哪種播放格式，比如m3u8在PC端IE11以上的瀏覽器才能播放，如果遇到IE11以下的瀏覽器，我們自動(dòng)會(huì)選擇Flash播放。在視頻格式方面，假設(shè)視頻是rtmp和flv，我們會(huì)自動(dòng)選擇Flash播放。另外，如果用戶自主設(shè)置useH5Prism和useFlashPrism屬性，那我們也會(huì)依照用戶的選擇。

瀏覽器支持情況

FLASH支持IE8以上，在瀏覽器上啟動(dòng)允許FLASH運(yùn)行即可；H5支持IE9以上，m3u8需要在IE11以上才可以運(yùn)行；其他瀏覽器都也都是可以支持的。

兩種播放方式

source，通過url 去播放
通過點(diǎn)播vid+playauth去播放，第二種方式和視頻云結(jié)合比較緊密

點(diǎn)播播放格式的選擇

點(diǎn)播服務(wù)中轉(zhuǎn)碼生成的視頻格式有很多，包括m3u8、flv、mp4等。播放器有自己的一套邏輯去選擇播放格式。對(duì)于H5來說，默認(rèn)播放低清版本來節(jié)省流量，如果用戶使用了切換清晰度的功能，那我們會(huì)默認(rèn)打開他選擇的版本。格式方面，則默認(rèn)播放mp4，用戶也可以設(shè)置qualitySort來優(yōu)先播放高清的的版本。對(duì)于Flash來說，默認(rèn)格式順序是m3u8、flv、mp4。

二、功能介紹及啟用

創(chuàng)建播放器

引用正確的JS和CSS文件
添加播放器容器需要設(shè)置容器的id屬性，另外2.0.1之前的版本要添加prism-player類型。

New Aliplayer創(chuàng)建播放

在線配置，用戶可以預(yù)先體驗(yàn)下播放器的情況

Aliplayer-Cli創(chuàng)建演示例子

用戶需要演示例子的時(shí)候，不需要寫很多代碼，通過這個(gè)命令，就可以創(chuàng)建例子，直接體驗(yàn)AliPlayer。

PC端支持m3u8

播放域名啟用允許跨域訪問

訂閱和取消事件

清晰度切換

H5 1.9.9以后的版本和id+playauth播放方式才支持清晰度切換；支持記憶選擇的清晰度，當(dāng)選擇的清晰度不能播放時(shí)，自動(dòng)選擇下一個(gè)清晰度播放。

手動(dòng)切換視頻-H5

這個(gè)功能播放器內(nèi)比較常見。我們把它分成兩種情況去處理，如果是地址播放，我們通過loadByUrl來播放；如果是vid+playauth播放，我們通過replayByVidAndPlayAuth的方法來播放。

手動(dòng)切換視頻-flash

地址播放方法與H5的方法一樣，vid+playauth播放則需要先銷毀播放器，再重新創(chuàng)建播放。

不同地址格式的切換

只能先銷毀播放器，再重新選擇正確的播放器播放。Github地址看simple demo：https://github.com/alilmq/aliplayer-simple-demo

![b_3_7]

UI自定義

很多用戶有這個(gè)需求，所以我們的UI是可以隱藏掉的。提供了一個(gè)skinLayout的屬性，當(dāng)這個(gè)屬性沒有指定值的時(shí)候，UI組件是全部顯示。如果是空數(shù)組的時(shí)候，UI組件全部不顯示。并且可以自定義組件的顯示和位置，在默認(rèn)UI基礎(chǔ)上去裁剪，2.3.0版本以后，用戶也可以通過自定義插件的方式自定義自己的UI。

截屏

H5啟用:

FLASH啟用：snapshot:true

H5播放器，播放域名需添加允許跨域訪問的header

支持訂閱snapshoted事件，獲取截屏的時(shí)間點(diǎn)和數(shù)據(jù)：

支持設(shè)置截圖的大小和質(zhì)量：

支持添加文字水?。?/p>

邊轉(zhuǎn)變播功能

邊轉(zhuǎn)邊播是MTS的功能，播放器可以支持這種場(chǎng)景的播放。第一次觀看的時(shí)候調(diào)用MTS API啟動(dòng)轉(zhuǎn)碼，邊轉(zhuǎn)碼邊播放，而且可以設(shè)置延遲播放。轉(zhuǎn)碼中使用直播播放器，轉(zhuǎn)碼完成后使用點(diǎn)播方式播放。

H5 android微信同層播放

因?yàn)镠5在android端微信打開時(shí)，會(huì)自動(dòng)全屏播放，覆蓋Dom元素。

同層播放一般有兩種業(yè)務(wù)場(chǎng)景，一種是點(diǎn)播的，視頻在某個(gè)地方播放，下面的評(píng)論、播放列表等,demo地址：https://github.com/alilmq/h5demo

還要一種場(chǎng)景是直播場(chǎng)景，視頻需要全屏?？梢酝ㄟ^設(shè)置x5_type:h5啟用同層播放。Demo 地址：https://github.com/alilmq/h5livedemo

另外H5微信同層播放，有兩篇文章可以參考:

http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html

國際化

提供language屬性，用于啟用各種語言，默認(rèn)為zh-cn，可選值為zh-cn or en-us。

倍速播放

提供UI的版本，只提供了0.5、1、1.5、2四種倍速播放；而setspeed方法，可以隨意設(shè)置倍速播放。這個(gè)可能會(huì)有一些限制，移動(dòng)端有的瀏覽器會(huì)不支持，比如android微信。

對(duì)于直播播放失敗的處理

在播放失敗時(shí)候，會(huì)嘗試重新播放，觸發(fā)onM3u8Retry事件，事件里可以做一些提示，比如主播離開請(qǐng)稍等；如果幾次嘗試后還是失敗，會(huì)出發(fā)livestreamstop事件，事件里做一些直播失敗或結(jié)束的提示。

三、其他輔助功能及工具

我們也做了一些輔助工具，方便用戶去接入和排查問題。

診斷工具

通過錯(cuò)誤碼描述的映射關(guān)系，大概能知道用戶的錯(cuò)誤所在；

通過vid知道用戶播放的是哪個(gè)視頻；

通過uuid這個(gè)唯一標(biāo)識(shí)，可以在日志系統(tǒng)中查到用戶的播放狀態(tài)；

通過requestid和播放時(shí)間，可以定位到用戶的錯(cuò)誤是哪次播放的錯(cuò)誤和具體的播放時(shí)間。

這里還有一個(gè)診斷的功能，可以知道用戶環(huán)境的具體信息，省去手工獲取視頻的繁瑣，可以快速診斷問題。

地址：http://player.alicdn.com/detection.html

檢測(cè)工具

關(guān)于視頻播放失敗，我們提供了三種方式，原生H5、阿里云H5、阿里云Flash。我們把播放的日志調(diào)出來，通過日志來情況來判斷播放失敗的原因。舉個(gè)例子，如果用戶剛開始請(qǐng)求數(shù)據(jù)時(shí)就失敗的話，那我們會(huì)猜測(cè)存在鑒權(quán)失敗的情況；如果加載數(shù)據(jù)出錯(cuò)，那可能是用戶的網(wǎng)絡(luò)的原因；如果是開始播放后出錯(cuò)，可能就問題就出在解析或播放器不支持等方面。

ffmpeg查看視頻信息

有的用戶只有畫面，沒有聲音。我們可以通過ffmpeg可以看下視頻的格式、流的情況、碼率、幀率等。

最后，阿里云播放器的所有情況都聚合在以下的網(wǎng)站上：

http://player.alicdn.com/detection.html，其中包括幫助文檔、在線配置、診斷工具、產(chǎn)品demo等，大家可以登錄了解詳情。

在線咨詢

上一篇：容器邊框圖片的細(xì)節(jié)要求，CSS3屬性的瀏覽器兼容性設(shè)置，新手必學(xué)
下一篇：HTML5中Nav元素的正確打開方式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商