資料來源W3Schools
我們要撥放一個Mp4檔案的話，最直接的方式是在<Body>....</Body> 中放了一個
<video> Element
並指定source 來源。
<video width="480" height="320" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
你會看到如下的結果
video element 中的width指的是播放畫面的寬度，height是高度。
假如你的影片是1920 x 1080 ， 當指定width及height後，就會將影片
畫面縮放至480 x 320 ，而不是截到某一區塊而以，當然如果你不指定width及height，
影片有多大，撥放區塊就會放到多大。
controls 表示要顯示控制工具列，如果沒有打這個，只會有撥放的區域而以。
結果如下：
Your browser does not support the video tag.
如果您的瀏覽器不支援HTML5 或是video element 則會看到這個。
下圖是IE 6 執行結果。
今天我要實作一個可以選置檔案來撥放的HTML5網頁，我必須另外實作一個
檔案選擇器，其實也是用一個<input> tag 就可以達成。
<input type="file" id="files" name="files" accept="video/*"/>
結果如下圖，會出現一個檔案選擇器 ，不過每一種瀏覽器出現的場子會不太一樣。下面這個是chrome的。
IE 6 會長這樣
I
E 11 長這樣
FireFox 長這個樣子
accept="video/*"/其實是一種檔案過濾器，只能選擇video 類型的檔案，不加就可以任意選擇所有類型的檔案，但不一定能播放就是了。
當你點下瀏覽（選擇檔案） ，會跳出檔案選擇對話框。
選擇檔案完成後會顯示剛才所選的檔案。
選擇檔的功能到這裡算完成50％了，接下來是當我選擇好檔案後要如果把它指定給video撥放，必須透過javaScript寫一個fucnction來實作這段功能。
<script type="text/javascript">
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var file = files[0];//First File in FileList object
var video = document.getElementById('myVideo');
var myURL = window.URL || window.webkitURL;
var fileURL = myURL.createObjectURL(file);
video.src = fileURL;
}
一步步來解釋每一行程式碼。
var files = evt.target.files;
當選擇完畢檔案後，取得所選擇的檔案清單。（input可以設定成多選）
var file = files[0];
取得所選取的第一個檔案，實際上我們沒有設定多選，所以只能選擇一個檔案。
var video = document.getElementById('myVideo');
以video的id 取得video element
var myURL = window.URL || window.webkitURL
這行是用來取得URL物件，判定瀏覽器是否要使用prefixed ，chrome必須用window.webkitURL ，firefox則使用window.URL , 這也寫是為了相容於多種瀏覽器。
var fileURL = myURL.createObjectURL(file);
我們要撥放檔案，必須要把它轉換成URL的格式。
video.src = fileURL;
指定video 的src （相當於在source 中指定src）。
將input設定一個change事件（選擇的檔案改變後要執行的function）
function init()
{
document.getElementById('files').addEventListener('change', handleFileSelect, false);
}
記得在 body 中寫一個事件在網頁載入後去執行init註冊input的change事件。
onload="init()"
最後是完整程式碼
<html>
<head>
<title>Html5 Mp4</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var file = files[0];//First File in FileList object
var video = document.getElementById('myVideo');
var myURL = window.URL || window.webkitURL;
var fileURL = myURL.createObjectURL(file);
video.src = fileURL;
}
function init()
{
document.getElementById('files').addEventListener('change', handleFileSelect, false);
}
</script>
</head>
<body onload="init()">
<input type="file" id="files" name="files" accept="video/*" />
<br>
<br>
<video id="myVideo" src="" autoplay controls width="480" height="320" >
<p>Your browser does not support H.264/MP4.</p>
</video>
</body>
</html>
執行結果
當然你也可以按下控制列上的全螢幕鍵享受全螢幕撥放
沒有留言:
張貼留言