最近又要實現一個需求，每個日期下面都對應很多的視訊檔案，而我們需要點選其中一個讓它直接彈窗播放。

因為前端基本上沒有什麼基礎，本文只是強行實現了想要實現的功能，所以各位如果發現某些實現比較愚蠢，請不吝賜教。

實現基礎：
1. bootstrap
2. video標籤
3. JQuery

待處理的介面是這樣的。

1 替換原video標籤事件

目標是不管點選縮率圖還是播放按鈕都應該是彈窗，本身視訊不播放。
Html:

<div class="col-sm-9" id="filelist">
    <video controls="" width
 
="320" height="240" class="video_link" poster="xxx.jpg">
        <source src="xxx.mov?" type="video/mp4">
    </video>
    …………
</div>

1.1 為動態生成的video標籤繫結事件

$("#filelist").on('click', ".video_link",function(){
    var videoDom = event.target;
    videoDom.play();
});

先繫結一個點選事件，我們通過 event.target獲取到觸發事件的videoDOM，用執行播放作為測試。（實現點選video標籤就觸發事件）

1.2 video標籤播放按鈕也要能觸發事件

$("#filelist").on('mouseenter', ".video_link", function(){
    var videoDom = event.target;
    videoDom.addEventListener('play', function(){
        videoDom.play();
    }；
}

沒有找到點選video標籤播放按鈕觸發事件的繫結方法。即我們使用JQuery物件並不能使用videoDOM物件方法。
所以就拆成了兩步，
第一步：是如果要點選播放按鈕，滑鼠肯定會移動到video標籤內，即觸發了JQuery提供的滑鼠移動事件。我們通過 event.target獲取到觸發事件的videoDOM。
第二步：使用video 標籤本身提供的方法 addEventListener（’play’,function{}）;對play事件進行監聽。

PS:firefox不支援event解決方案。為了相容firefox 我們通過下列方式獲取event

$("#filelist").on('click', ".video_link",function(e){
    var eventAll =  window.event || e;
    videoDom = eventAll.target;
}

2 boostrape模態框

經常查閱資料，我們可以選擇boostrape模態框實現彈窗功能。

<div class="modal fade" id="myModal"  role="dialog" aria-labelledby="videoPlayModal">

Class：Bootstrap CSS 的四個 class modal、hide、fade 和 in。modal 用來把

2.1 modal-dialog 和modal-content兩個元素的影響

整個modal框架需要div.modal-dialog和div.modal-content兩個元素包裹，如果沒有樣式會非常奇怪。是這樣的：

用這兩個div包裹後是這樣的

<div class="modal-dialog" style="width:960px;">
    <div class="modal-content">

2.2 解決video標籤和modal模態框契合問題

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="videoPlayModal" aria-hidden="true">'
    <div class="modal-dialog" style="width:960px;">
        <div class="modal-content">
            <div class="modal-body">
                <video></video>
            </div>
        </div>'
    </div>
</div>

直接將video填入到modal-body 結果是這樣的：

我們為video新增style=”width= 100%;height=100%;object-fit:fill” 可以貼合div。但實際把video放在modal-body下會出現一定的錯位。
我們將video放在modal-dialog同級發現可以完美切合框架。同時也需要把modal-dialog寬度設定和視訊大小一致。

2.3 為modals新增退出連結。

<a class="close" data-dismiss="modal" style="position:absolute; top:5px; right:5px;">×</a>

當我嘗試把這個退出連結按照教程放在<div class="modal-head"> div中時 我發現header和video標籤也有很嚴重的錯位。
最後連結放到'<div class="modal-body">' 並用 style=”position:absolute; top:5px; right:5px;”語句把它放置在了右上角。
效果圖：

3 在事件中觸發模擬框並替換視訊地址

var videoUrl = ($(videoDom).find("source")).attr('src');
var jpgUrl = $(videoDom).attr('poster');
$("#myModal #playdom").attr("src", videoUrl);
$("#myModal #playdom").attr("poster", jpgUrl);
$("#myModal").modal('show')();

1. 通過JQuery得到觸發事件視訊的src（視訊地址）及poster（指定圖片地址）。
2. 用選擇器選到模擬框下面的video標籤。
3. 呼叫模擬框提供的方法（show）彈出模擬框。

PS:這部分有一個很坑的地方:

<video width="320" height="240" controls>
  <source src="movie.mp4"  type="video/mp4">
</video>

一般情況下的video標籤是這樣寫的，但是我們要動態修改video標籤，修改的src 並不是在source元素下，而是video元素下的src。

<video width="320" height="240" controls  src="">
  <source src="movie.mp4"  type="video/mp4">
</video>

• video 的src 這個屬性用於指定視訊的地址。
• Source標籤用於給媒體指定多個可選擇的（瀏覽器最終只能選一個）檔案地址，且只能在媒體標籤沒有使用src屬性時使用。瀏覽器按source標籤的順序檢測標籤指定的視訊是否能夠播放，如果不能播放，換下一個。此方法多用於相容不同的瀏覽器。Source標籤本身不代表任何含義，不能單獨出現。此標籤包含src、type、media三個屬性。

實際測試修改source標籤下的src是不能播放的