2017-12-21 11 views
1

I持ってAndroidデバイス上でローカルビデオをロードし、HTML5ビデオのsrcタグでそれを置き、次のコード:AndroidでHTML5動画srcを動的に変更しますか?

Javascriptのコード:

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搭載端末では機能しません。私は上記のJavaScriptコードを使用して、ちょうど次のようビデオパスを使用しない場合は、すべてが正常に動作します:

これは動作します:

<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 

これは、ビデオがローカルに存在し、上記のJavascriptコードに問題があることを意味します。しかし、私は問題が何であるか理解していない!

誰かがこの問題についてアドバイスをいただけますか?

ありがとうございます。

EDIT:

これは、上記のコードが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); 

}); 

EDIT:

詳しい調査の結果、私はビデオのsrcタグが時に正しく設定されていることが判明しました私は上記の私のJavaScriptコードを使用して、しかし、私は非常に奇妙な動的にsrcタグを設定すると、ビデオは再生されません。

+0

は、 'ready'ブロック内のjsかhtmlの下に置かれ、htmlがレンダリングされるまで実行されていないことを確認しますか? – chiliNUT

+0

@chiliNUT、上のjavascriptはボタンのクリックでのみトリガされ、ボタンはHTMLのレンダリングが完了してからご利用いただけます。 –

+0

もしあなたがより完全なコードサンプルを提供できるのであれば、 – chiliNUT

答えて

1

あなたが使っているフレームワークが分からないので、HTMLページを読み込む既存のベアボーンのAndroidアプリを使って同様のシナリオを簡単にテストしたところ、これは私のために働いていました。

HTML

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

初期JS:CHAへ

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(); 
関連する問題