通過html5加載SD卡視頻 - android

Question

我是新來的html5，任何人都可以幫助我如何加載html視頻標籤，它是從SD卡加載視頻。我試圖執行

<video width="320" height="240" controls onclick="this.play();> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

，但這個網站不是從SD卡加載視頻。任何人都可以指導我如何從本地SD卡加載視頻。

Answer 1

由於安全原因，HTML5 Filesystem API允許網頁僅在沙盒文件系統中打開和處理文件，並且該沙箱的限制令人傷心地由瀏覽器決定。

一個解決辦法是可能的是，你可以做一個文件輸入元素，並允許用戶選擇視頻文件，然後把它作爲視頻元素的src屬性

也請注意，不添加file:後綴視頻無法播放， 所以請確保視頻標籤的語法是這樣的

<video width="365" height="200" src="file:///sdcard/Download/video.mp4" controls autobuffer></video> 

這一招只知道用默認的Chrome瀏覽器中工作。

因此，不，基於安全原因，沒有辦法精確地執行您想要的操作，但是您可以嘗試一些解決方法。

更新1：

<input type="file" id="files" name="files[]" multiple /> 
<output id="list"></output> 

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

    Your browser does not support the video tag. 
</video> 

<script> 
$(document).on('ready',function(){ 
var video = $("#video"); 

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 

     // Only process image files. 
     if (!f.type.match('video.*')) { 
     continue; 
     } 



     var reader = new FileReader(); 

     // Closure to capture the file information. 
     reader.onload = (function(theFile) { 
     return function(e) { 
     video.get(0).src = e.target.result; 
     console.log(video.get(0)); 
     video.get(0).play(); 


      var span = document.createElement('span'); 
      span.innerHTML = "a video file"; 
      document.getElementById('list').insertBefore(span, null); 
     }; 
     })(f); 

     // Read in the image file as a data URL. 
     reader.readAsDataURL(f); 
    } 
    } 

    document.getElementById('files').addEventListener('change', handleFileSelect, false); 

}); 

使用下面的代碼就可以讀取視頻文件並將其傳遞到視頻元素和播放。

PS：唯一的問題是它首先將視頻文件加載到內存中，如果視頻太大，則會導致瀏覽器崩潰。所以請檢查此技巧是否適用於您