Video in Bild dynamisch hinzufügen

Meine Anforderung ist einfach ein Video (URL in JSON-Datei) auf einem Flugzeug in einem Rahmen zu spielen. Ich habe Videoeinheit in meinem html erstellt alsVideo in Bild dynamisch hinzufügen

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

In meiner Registerkomponente folge ich habe die src-Datei Video unten

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')); 
     }); 
    } 
});

Mein Konsolenprotokoll wird mit Pfad hinzugefügt in der JSON-Datei erwähnt angezeigt

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

In Registerkarte Netzwerk kann ich mit Typ-Medien und Status sehen bekam meine Datei 200 geholt, aber ich bin immer noch Fehler immer

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.

Wie ist der richtige Weg, um das Video hinzuzufügen. Wo liege ich falsch? Bitte helfen

Quelle

2017-03-01 AishApp

@ngokevin, könnten Sie bitte helfen Sie mir auf diese – AishApp

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);

Quelle

2017-03-02 23:39:08 ngokevin

Vielen Dank für Ihre Antwort. Mein Code funktioniert gut in Firefox, aber in Chrom, Videos funktionierten nicht. – AishApp

Wie bereits erwähnt, werden die Videos nur in Firefox und nicht in Chrome wiedergegeben. Es gibt auch einen Weg, wie wir das Video per Knopfdruck abspielen und stoppen können. ? Bitte helfen – AishApp

Ich war das gleiche Problem und schaffte es nur, um es mit so etwas wie dies in Chrome zu bekommen arbeiten:

// 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();

Dies hat den zusätzlichen Vorteil, dass Sie steuern können Wiedergabe bei Bedarf (new_asset.pause(), new_asset.currentTime = X, stummgeschaltet = true, etc).

Bei größeren Videos müssen Sie möglicherweise einige Callbacks hinzufügen, z. B. oncaplaythrough, um zu warten, bis das Video ausreichend geladen ist.

Quelle

2017-07-14 22:04:08

Video in Bild dynamisch hinzufügen

Antwort

Verwandte Themen