Video.js - 使用createObjectURL創建blob（本地文件@客戶端）

Question

我想在本地播放視頻（無需將其上傳到服務器）。 我能做到這一點的純JavaScript和HTML5，像這樣：

HTML：

<video id="video1"></video> 
<input type="file" id="fileInput" multiple /> 

JavaScript的使用jQuery：

var $video = $('#video1'); 
$video.prop('src', URL.createObjectURL($('#fileInput').get(0).files[0])); 
$video.get(0).play(); 

和它的作品。

，但與下面的代碼的Video.js：

var myPlayer = videojs('video1').ready(function() { 
      // ready 
      var filename = URL.createObjectURL($('#fileInput').get(0).files[0]); 
      this.src(filename); 
      this.load(); 
      this.play(); 
     }); 

我得到以下錯誤：

VIDEOJS: TypeError: Cannot read property '1' of null {stack: (...), message: "Cannot read property '1' of null"}

我猜測，這是因爲BLOB沒有一個文件擴展名，它看起來像這樣：

blob:http%3A//localhost%3A9000/5621470e-593a-4255-8924-f48731b97803

沒有人知道這個錯誤的原因併發揮本地網絡連接的方式在video.js的客戶端？

感謝， 利奧爾

Answer 1

，我發現我的錯誤，我 必須通過的文件類型的Video.js像這樣：

var myPlayer = videojs('video1').ready(function() { 
      // ready 
      var filename = $('#fileInput').get(0).files[0].name; 
      var fileUrl = URL.createObjectURL($('#fileInput').get(0).files[0]); 
      var fileType = $('#fileInput').get(0).files[0].type; 
      console.log(filename); 
      this.src({ type: fileType, src: fileUrl }); 
      this.load(); 
      this.play(); 
     }); 

現在它工作正常...

Answer 2

要玩blob對象，你可以通過blob如下：

$video.src({type:'video/mp4', src: URL.createObjectURL(..blobObject..)});