IE8相容html5視訊播放
阿新 • • 發佈:2019-01-23
第一步:引入Script標籤
<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>
第二步:編寫html程式碼
<video controls="controls" style="width: 100%; height: 100%; background-color: rgb(0, 0, 0);">
<source src="1.mp4" type="video/mp4" />
</video>
至此,確定視訊檔案的顯示就搞定了。但是實際開發中經常動態新增video標籤,而且src也是不定的,此時上述方式就不能夠滿足需求了,那麼如何動態使用呢?下面上示例:
第一步:依舊引入script標籤,沒有什麼問題
第二步:動態新增程式碼
首先html未新增之前程式碼:
<div class="testVideoClass">未新增視訊</div>
動態新增程式碼:
$('.testVideoClass').append('<video src="1.mp4" width="320" height="200" controls preload></video>');
第三步:呼叫html5media.min.js檔案
注意:此時需要簡單封裝一個方法以便呼叫:
function showVideo(){
//html5media.min.js中的程式碼複製貼上
}
第四步:資料動態新增完畢之後手動呼叫即可
以上是我處理ie8播放視訊使用的方法,希望各位大牛有新的方法的話多多指點,小弟不勝感激!技術拙劣大牛勿噴,謝謝!