通过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：唯一的问题是它首先将视频文件加载到内存中，如果视频太大，则会导致浏览器崩溃。所以请检查此技巧是否适用于您