French developer @ Uptale.
Machine learning, data,VR and 3D rendering. Sometimes front end when it's needed
{
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;
setTimeout(
() =>
setInterval(() => {
const videoSphereIndexActive = (videoIndex + 1) % 2;
const videoSphereIndexInactive = videoIndex % 2;
// $(`#video-${videoIndex - 1}`).remove();
const videoSphere = $(`#video-sphere-${videoSphereIndexInactive}`);
videoSphere.attr("visible", true);
$(`#video-sphere-${videoSphereIndexActive}`).attr("visible", false);
const randomNumber = videoIndex % tesla_video.length;
const video = $(`<video id='video-${videoIndex}' />`);
video.attr("loop", true);
video.attr("crossorigin", "anonymous");
video.attr("src", tesla_video[randomNumber]);
video[0].addEventListener(
'loadeddata',
function() {
console.log("Play");
video[0].muted = true;
video[0].play();
// videoSphere[0].components.material.material.map.image.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://www.tesla.com/ns_videos/charging_overview_hero.mp4?20171207",
"https://tesla-cdn.thron.com/delivery/public/video/tesla/b60dc060-9c29-491b-9273-5fbd808428cc/bvlatuR/WEBHD/interior-mobile"
]
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.
