使用圖片視頻展現插件blueimp Gallery改造網站的視頻圖片展現

在不少狀況下，咱們網站可能會展現咱們的產品圖片、以及教程視頻等內容，結合一個比較好的圖片、視頻展現插件，可以使得咱們的站點更加方便使用，也更加酷炫，在Github上有不少相關的處理插件能夠找來使用，有些效果還很是好，本篇介紹使用圖片視頻展現插件blueimp Gallery改造網站的視頻圖片展現，並和以前版本的效果進行對比。

一、blueimp Gallery插件介紹

blueimp Gallery是一個是具備觸摸功能，響應式和可定製的圖像和視頻展現插件，爲移動和桌面瀏覽器作了相關優化，它支持滑動、鼠標和鍵盤導航操做，支持變換效果、幻燈片展現、全屏等功能，以及能夠擴展到其餘內容類型。

該插件的Github地址以下:http://blueimp.github.io/Gallery/，這個插件替代了原來的Bootstrap-Image-Gallery，並且得到的星星也是比較多的，是很受歡迎的一個插件。

視頻的展現界面以下所示

咱們打開通常看不到其圖片展現的內容，能夠看到部分視頻的展現，不過頁面對功能的使用介紹的很是詳細，咱們能夠下載代碼進行測試，就能夠得到咱們所需的效果了。

圖片的畫廊（幻燈片）展現方式和視頻是一直的，只是視頻的中間有一個播放按鈕而已，若是是圖片的幻燈片展現方式，那麼界面圖形以下所示，能夠看到二者是很是相似的，據說這個控件還能夠本身擴展展現其餘文檔內容，如HTML、PDF等，不過我沒有進行測試。

圖片的展現還支持另一種方式，就是縮略圖的並排展現，而後單擊圖片的時候進行放大全屏瀏覽，並帶有左右切換的提示和按鈕。

從效果來看能夠總體瞭解到這個插件效果是很是好的一個插件，所以想用它來對我公司網站：廣州愛奇迪 上的視頻和圖片進行更佳效果的展現。

 

二、blueimp Gallery的使用

這個控件的使用比較簡單，因爲官方網站也作了介紹，這裏簡單進行說明一下就是。

首先咱們須要在頁面的頭部開始位置加入對應的CSS樣式文件，以下所示。

    <!--圖片視頻展現-->
    <link rel="stylesheet" href="blueimp-Gallery/css/blueimp-gallery.min.css">
    <link rel="stylesheet" href="blueimp-Gallery/css/blueimp-gallery-indicator.css">
    <link rel="stylesheet" href="blueimp-Gallery/css/blueimp-gallery-video.css"> 

控件須要使用Jquery的，所以須要在合適的位置加入對JQuery的引用，以下所示。

    <script src="./content/js/jquery-1.8.3.min.js"></script>

其餘的JS咱們通常放在頁面的最後，這樣能夠提升頁面加載速度，在此以前咱們須要在頁面的正文裏面加入咱們所須要的內容展現代碼，以下所示。

<div id="blueimp-video-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

最後咱們須要在頁面的尾部加入相關的JS文件，以下所示。

<!--圖片展現腳本-->
<script src="blueimp-Gallery/js/blueimp-helper.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery.min.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-fullscreen.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-indicator.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-video.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-vimeo.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-youtube.js"></script>
<script src="blueimp-Gallery/js/jquery.blueimp-gallery.min.js"></script>

而後在添加咱們自定義的JS加載內容代碼，用於把它們綁定在界面的元素上展現，以下JS代碼所示。

<script>   
    blueimp.Gallery([
        {
            title: 'Winform框架增量開發過程',
            href: 'doc/Video/Winform框架增量開發過程.mp4',
            type: 'video/mp4',
            poster: 'blueimp-Gallery/Pictures/videobg.png'
        },
        {
            title: '混合框架圖片顯示及存儲',
            href: 'doc/Video/混合框架圖片顯示及存儲.mp4',
            type: 'video/mp4',
            poster: 'blueimp-Gallery/Pictures/videobg.png'
        },
        {
            title: '混合框架增量開發過程',
            href: 'doc/Video/混合框架增量開發過程.mp4',
            type: 'video/mp4',
            poster: 'blueimp-Gallery/Pictures/videobg.png'
        },
        {
            title: '混合框架之WebAPI接入的增量開發過程',
            href: 'doc/Video/混合框架之WebAPI接入的增量開發過程.mp4',
            type: 'video/mp4',
            poster: 'blueimp-Gallery/Pictures/videobg.png'
        }        
    ], 
    {
        container: '#blueimp-video-carousel',
        carousel: true
    });

</script>

其中Title是說明內容，Href爲視頻或者圖片的地址，type爲媒體類型，poster是視頻的背景圖片，若是是圖片，那麼poster須要修改成thumbnail，它們的使用都是同樣的。

 

三、blueimp Gallery改造網站的界面效果

因爲我公司的網站須要展現一些產品的圖片，以及相關的教程視頻，所以整合這個插件是很是好的展現方式。整合後能夠看到界面效果以下所示，效果參考地址：http://www.iqidi.com/MixWinVideo.htm 

這種直接嵌入在頁面裏面進行播放，也能夠經過全屏按鈕進行全屏展現視頻的效果很是好，以下所示。

上圖咱們須要爲視頻準備一個合適大小的背景圖片，這樣才能比較好的進行展現，上圖就是一個圖片背景。

另外，有時候須要展現一些產品圖片，那麼可使用LightBox的方式進行展現圖片，以下所示。

單擊任何一個圖片，會放大整個圖片預覽界面，方便查看清晰圖片，並可使用鼠標、鍵盤、按鈕等導航到其餘圖片，以下所示。

這種展現方式比較直觀，同時也比較簡單操做，總的來講是很是不錯的。

原來的方式展現視頻截個圖說明下，對比一下。

首先須要在頁面裏面添加連接，而後經過單擊鏈接彈出一個對話框進行播放的Bootstrap方式。

並且代碼也相對比較多，雖然可以解決視頻播放問題，不過總歸效果很差，使用圖片視頻展現插件blueimp Gallery改造，一下高大上了不少。

效果參考地址：http://www.iqidi.com/MixWinVideo.htm 

以上就是我使用圖片視頻展現插件blueimp Gallery對內容進行的改進，但願可以給你提供思路和借鑑的作法，也歡迎技術交流。