一、開發背景簡介
項目要求調用手機本地相冊的視頻並在web頁面上展示，但是原生的video標籤並不能做到很好的兼容性，所以使用第三方庫video.js調用手機本地視頻並播放。
二、video.js的引入
//在head部分加上以下兩行代碼即可
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
三、代碼展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
</head>
<body>
<label>選取視頻</label>
<br>
<input type="file" id='videoUp' accept="video/mp4">
<!--video用於顯示媒體設備的視頻流，自動播放-->
<video id="video" class="video-js vjs-default-skin" controls="controls" autoplay="autoplay" preload="metadata" muted="muted" x5-playsinline="" playsinline="" webkit-playsinline="">調用手機相冊</video>
<br />
<script type="text/javascript">
function getObjectURL(file) {
var url = null;
if(window.createObjcectURL != undefined) {
url = window.createOjcectURL(file);
} else if(window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
//jquery代碼
$(function() {
//單文件上傳
$("#videoUp").on("change", function() {
//$(this)[0] 等價於$(this).get(0)，將 JQuery 對象轉爲 DOM 對象，files 爲其屬性，得到的是一個文件對象數組
var files = $(this)[0].files;
if(files.length > 0) { //未選中文件時，長度爲0
var file = files[0]; //因爲是單文件上傳，所以只有一個文件（File）對象
var video = document.getElementById("video");
var objURL = getObjectURL(this.files[0]); //這裏的objURL就是input file的真實路徑
var option = {
muted: true,
controls: true,
height: 320,
width: 170,
loop: false,
// 更多配置.....
};
var source = [{
type: "video/mp4",
src: objURL
}]
var player = videojs('video', option, function onPlayerReady() {
this.src(source);
this.autoplay();
});
}
});
});
</script>
</body>
</html>
