2017-03-01 1 views
0

私の必要条件は、フレーム内のプレーンでビデオ(jsonファイルのURL)を再生することです。私のレジスタコンポーネント内ビデオをフレームに動的に追加する

<a-video id="video_1" position="0 0 2" geometry="width:2.4;height:1.4"></a-video> 

を次のように私は私のコンソールログをJSONファイルに記載されたパスで表示されている

AFRAME.registerComponent('myComp', { 
    schema: { 
     file: {type: 'asset', default: 'assets/data/file1.json'}, 
     var: {type: 'number', default: 0} 
    }, 
    init: function() { 
    }, 
    update: function() { 
     var data = this.data; 
     var scene = this.el.sceneEl; 
     var screen = scene.querySelector('#video_' + data.var); 
     load(data.file, function (response) { 
      var products = response.mydata; 
      screen.setAttribute('src',products[data.var].videoUrl); 
     }); 
     this.el.addEventListener('mouseenter', function() { 
      console.log("mouseenter",screen.getAttribute('src')); 
     }); 
    } 
}); 

以下のように私はビデオにSRCファイルを追加した私のhtmlでビデオエンティティを作成しましたネットワーク]タブで

"mouseenter assets/img/movies/videos/video1.mp4" 

、私は私のファイルは、種類のメディアとステータス200とフェッチました。しかし、まだ、私はエラー

を取得しています見ることができました
components:texture:warn `$s` is not a valid video +41ms assets/img/movies/videos/video1.mp4 

index.html:1 [.Offscreen-For-WebGL-000000BA313F15D0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. 

ビデオを追加する正しい方法は何ですか。どこが間違っているの?私は同じ問題を抱えて、ちょうどそれがこのようなものとChromeで動作し得ることをどうにかして

+0

@ngokevin、これで私を助けてくださいました – AishApp

答えて

0

https://aframe.io/docs/0.5.0/guides/using-javascript-and-dom-apis.html#creating-an-entity-with-createelement

var videoEl = document.createElement('a-video'); 
videoEl.setAttribute('src', videoUrl); 
this.el.appendChild(videoEl); 
+0

あなたの返事をありがとう。私のコードはFirefoxでうまくいきましたが、クロムではビデオは機能しませんでした。前述のように – AishApp

+0

は、ビデオはfirefixでのみ再生され、chromeでは再生されません。また、ボタンをクリックしてビデオを再生したり停止したりすることもできます。 ?助けてください – AishApp

0

を助けてください:

// Create a new asset 
var new_asset = document.createElement('video'); 
new_asset.setAttribute('id', 'dynVid'); // Create a unique id for asset 
new_asset.setAttribute('src', videoUrl); 

// Append the new video to the a-assets, where a-assets id="assets-id" 
document.getElementById('assets-id').appendChild(new_asset); 

// Add the asset to the a-video 
screen.setAttribute('src', '#dynVid'); 
// Start playback 
new_asset.play(); 

これは、あなたがコントロールすることができます追加の利点を持っています必要に応じて再生します(new_asset.pause()、new_asset.currentTime = X、muted = trueなど)。

大きなビデオの場合は、ビデオが十分に読み込まれるまで待つために、oncanplaythroughのようなコールバックを追加する必要があります。

関連する問題