2013-05-11 4 views
2

패키지 앱에서 로컬 비디오 파일을 재생할 수 있습니까? 파일 (chrome.fileSystem.chooseEntry)을 선택하고 경로 (chrome.fileSystem.getDisplayPath)를 식별하는 코드를 작성했지만 비디오 태그의 소스로 설정하면 다음이 반환됩니다.Chrome 패키지 앱에서 로컬 비디오 파일 재생

로컬로드 할 수 없습니다. resource : file : ///

미리 감사드립니다.

+0

나는 진전을 보였지만 충분히 좋은 것은 아닙니다. 나는 그것을 비디오 uri로로드하고 비디오 태그에있는 소스 태그의 src 속성으로 설정하기로 결정했다. 비디오 객체에 메서드로드를 호출하고 비디오가 내 앱과 같은 모든 명령에 응답하지 않습니다. serialize 된 비디오를 소스로 설정하는 줄을 data-uri로 실행 한 후이 응용 프로그램을 실행하는 프로세스는 메모리 사용량을 1GB 이상으로 늘 렸습니다. 실용적 일뿐 아니라 일부 비디오 스트리밍 서버를 설치한다고 생각합니다. –

+1

GitHub 샘플을 보셨습니까? https://github.com/GoogleChrome/chrome-app-samples/tree/master/media-gallery는 임의의 파일을로드하는 대신 Media Gallery API를 통과하는 것이 좋습니다. 로컬 파일에도 적용 할 수 있습니다. – sowbug

+0

나는 sowbug을했지만, 거의 100mb의 비디오를 data-uri로 serialize하는 것은 매우 느리다. 거의 항상 앱이 다운된다.:/ 비디오의 영구 영역에 비디오를 복사하려고했지만 해당 주소 (전체 경로 또는 FileEntry의 toURL)에 src 속성을 설정하면 비디오에 대한 요청이 취소됩니다. –

답변

4

내 솔루션이 호출을 통해 로컬 파일을 선택했다 해당 디렉토리 :

fileEntry.copyTo(dirEntry, fileEntry.name, function(newFileEntry) { 
    video.src = newFileEntry.toURL(); 
}); 

완벽하게 작동하고 꽤 깨끗합니다. 여기에 구현되었지만 코덱 감지가 중요합니다. Chrome에서 지원하지 않는 동영상을로드하려고하면 코드에 문제가 있다고 생각할 수 있지만 코덱/비디오 플레이어와 관련되어 있기 때문입니다.

window.requestFileSystem(window.PERSISTENT, 300*1024*1024, function(fileSystem) { 
    console.log('A request to access the file system have been made.'); 

    $scope.fileSystem = fileSystem; 
}, $scope.errorHandler); 

$scope.loadVideo = function() { 
    chrome.fileSystem.chooseEntry({'type': 'openFile'}, function(fileEntry) { 
     $scope.fileSystem.root.getDirectory('videos', { create : true }, function(dirEntry) { 
      fileEntry.copyTo(dirEntry, fileEntry.name, function(newFileEntry) { 
      video.src = newFileEntry.toURL(); 
      }); 
     }, $scope.errorHandler); 
    }); 
}; 
+0

코드 줄 바꿈 저는 AngularJS 컨트롤러가 있습니다. –

1

비슷한 문제가 있어도 보안 문제로 인해 file:/// 개의 URL을로드 할 수 없으며 미디어 갤러리 예제를 사용하면 동영상 파일이 150MB 이상이기 때문에 충돌이 발생합니다.

크롬 팀이 https://github.com/GoogleChrome/apps-resource-loader을보고 RAL.RemoteImage 방법을 사용하여 파일을 샌드 박스 저장소에 다운로드 한 다음 사용하는 방법을 제안했습니다.

은 내가 ral.min.js 사용하고로드하기 전에 대신 imgvideo 객체에 요소를 변경하고 기본 이미지 대신 포스터를 사용하여, 나는 RemoteImage 개체를 기반으로 내 자신의 RemoteVideo 객체를 구현하고이 근무 나를.

fileSystem.root.getDirectory('videos', { create : true }, function(dirEntry) { 
    // ... 
}, $scope.errorHandler); 

그리고 로컬 파일을 복사 : 내 샌드 박스 지속적인 지역에 디렉토리를 가지고 메모리에두고

chrome.fileSystem.chooseEntry({'type': 'openFile'}, function(fileEntry) { 
    // ... 
}); 

:

+0

dar, 답변 해 주셔서 감사합니다. 나는 비슷한 해결책을 찾았 기 때문에 그 질문에 대해서도 답장을했다. 내가 한 일은 내 앱 샌드 박스 저장소에 디렉토리를 만들고 거기에 선택한 파일을 복사하고 로컬 메모리에 새로운 fileEntry를 추가하여 toURL() 메서드를 호출하고 영구 저장소에 복사 한 비디오의 주소를 가져온 것입니다. –

2

나는 FileEntry에서 개체의 URL을 생성하고 사용이 <video> 태그의 src 같다 무슨 일 발견했습니다 더 참고로

여기에 전체 코드입니다. 여기에 샘플이 있습니다.

video_file.file(function(file) { 
     var video_url = webkitURL.createObjectURL(file); 
     $player.attr("src", video_url); 
}); 
관련 문제