2017-12-21 23 views
1

나는이 안드로이드 디바이스의 로컬 비디오를로드하고 HTML5 비디오 SRC 태그에 배치 다음 코드를Android에서 HTML5 동영상 src를 동적으로 변경 하시겠습니까?

자바 스크립트 코드 :

var path = 'file:///data/data/com.myapp.app/files/'; 

var src = path+'Intro.mp4'; 
var video = $("#introVideo"); 

video.find("source").attr("src", src); 

HTML 코드 :

<video id="introVideo" width="100%" poster="poster.jpg"controls> 
<source src="" type="video/mp4"> 
</video> 

Android 기기에서는 작동하지 않습니다. 내가 위의 자바 스크립트 코드를 사용하여 바로 다음과 같은 비디오 경로를 사용하지 않는 경우, 모든 작동합니다 :

이 작동 :

<video id="introVideo" width="100%" poster="poster.jpg"controls> 
<source src="file:///data/data/com.myapp.app/files/Intro.mp4" type="video/mp4"> 
</video> 

나는 정확한 URL을 얻을 alert(src); 때 즉 :

file:///data/data/com.myapp.app/files/Intro.mp4 

비디오가 로컬에 존재하며 위의 자바 스크립트 코드에 문제가 있음을 의미합니다. 그러나 나는 그 문제가 무엇인지 이해하지 못한다!

누군가이 문제에 대한 조언을 구할 수 있습니까?

미리 감사드립니다.

편집 :

이것은 위의 코드를 trigerred 방법입니다 :

$(document).on('click','.backit', function(e){ 

    var path = 'file:///data/data/com.myapp.app/files/'; 

    var src = path+'Intro.mp4'; 
    var video = $("#introVideo"); 

    video.find("source").attr("src", src); 

}); 

편집 : 추가 조사, 나는 비디오의 src 태그가 올바르게 때 설정되는 것을 발견

위의 자바 스크립트 코드를 사용하지만, src 태그를 동적으로 설정하면 동영상이 재생되지 않습니다. 이는 매우 이상합니다.

+0

은'ready' 블록에서 js입니까, 아니면 html 아래에 위치합니까? html이 렌더링 될 때까지 실행되지 않도록하려면? – chiliNUT

+0

@chiliNUT, 위의 자바 스크립트는 버튼 클릭에서만 트리거되며 버튼은 HTML 렌더링이 완료된 후에 만 ​​사용할 수 있습니다. –

+0

그럼 어쩌면 더 완벽한 코드 샘플을 제공 할 수 있습니다 – chiliNUT

답변

1

사용중인 프레임 워크를 모르는 상태에서 HTML 페이지를로드하는 기존의 베어 본 뼈대 Android 앱을 사용하여 비슷한 시나리오를 신속하게 테스트했는데 이것이 저에게 효과적이었습니다 (런타임시 웹 뷰는

HTML

<video id="vid" width="320" height="240"></video> 

초기 JS : 차에

var path = 'file:///android_asset/'; 
var vid = document.getElementById('vid'); 
var src = document.createElement('source'); 

src.setAttribute('src', path + 'video1.mp4'); 

vid.appendChild(src); 
vid.play(); 

내 동영상 프로젝트)에 로컬로 file:///android_asset/ 경로에서 자산에 접근 소스를 새 비디오로 이동하십시오.

src.setAttribute('src', path + 'video2.mp4'); 

vid.load(); 
vid.play();