French developer @ Uptale.
Machine learning, data,VR and 3D rendering. Sometimes front end when it's needed
Published
Edited
Oct 13, 2020
{
aframe;
return html`<a-scene id="scene" embedded style="width: 100%; height:400px">
<a-assets id="assets">
<video id="video-0" autoplay loop crossorigin="anonymous" preload="auto" src="https://tesla-cdn.thron.com/delivery/public/video/tesla/93545640-2ce8-4483-ba72-8f6949a41b47/bvlatuR/WEBHD/hero">
</video>
</a-assets>
<a-videosphere id="video-sphere-0" src="#video-0" rotation="0 180 0"></a-videosphere>
<a-videosphere id="video-sphere-1" src="#video-0" rotation="0 180 0" visible="false"></a-videosphere>
</a-scene>`;
}
creationRoutine = {
let videoIndex = 1;
let previousVideo = null;
setTimeout(
() =>
setInterval(() => {
const videoSphereIndexActive = (videoIndex + 1) % 2;
const videoSphereIndexInactive = videoIndex % 2;
const randomNumber = videoIndex % tesla_video.length;
gettingBlob(tesla_video[randomNumber], data => {
const objectURL = URL.createObjectURL(data);
console.log(data);
const videoSphere = $(`#video-sphere-${videoSphereIndexInactive}`);
videoSphere.attr("visible", true);
$(`#video-sphere-${videoSphereIndexActive}`).attr("visible", false);
if (previousVideo) {
previousVideo[0].pause();
previousVideo[0].removeAttribute('src'); // empty source
previousVideo[0].load();
}
const video = $(`<video id='video-${videoIndex}' />`);
video.attr("loop", true);
video.attr("crossorigin", "anonymous");
video.attr("src", objectURL);
video[0].addEventListener(
'loadeddata',
function() {
console.log("Play");
video[0].muted = true;
video[0].play();
},
false
);
$("#assets").append(video);
videoSphere.attr("src", `#video-${videoIndex}`);
videoIndex++;
$("#assets").append(video);
});
}, 2000),
3000
);
}
$ = require("jquery")
tesla_video = [
"https://tesla-cdn.thron.com/delivery/public/video/tesla/93545640-2ce8-4483-ba72-8f6949a41b47/bvlatuR/WEBHD/hero",
"https://tesla-cdn.thron.com/delivery/public/video/tesla/107d0504-f78e-482b-ac6c-c015210a83d6/bvlatuR/WEBHD/autopilot-mobile",
"https://tesla-cdn.thron.com/delivery/public/video/tesla/f4a072e8-6747-442e-9055-781a06742708/bvlatuR/WEBHD/hero_1",
"https://tesla-cdn.thron.com/delivery/public/video/tesla/b60dc060-9c29-491b-9273-5fbd808428cc/bvlatuR/WEBHD/interior-mobile"
]
function gettingBlob(url, onLoad) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function(e) {
console.log("loaded");
onLoad(this.response, e.target.status);
};
xhr.send();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
