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>

但是这个html没有从sdcard加载视频。任何人都可以指导我如何从本地SD卡加载视频。

Answer 1

由于安全原因，它不被允许，HTML5文件系统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：唯一的问题是它首先将视频文件加载到内存中，如果视频太大，则会导致浏览器崩溃。亲切地检查这个技巧是否适合你

通过html5-- android加载SD卡视频

1 个答案: