Video_Aframe

Play Alpha Video Or Normal video

by giuseppe straziota

HTML

<!doctype HTML>
<html>

<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        AFRAME.registerComponent('vidhandler', {
            init: function() {
                this.toggle = false;
                this.vid = document.querySelector("#vid");
                this.vid.pause();
            },
            tick: function() {
                if (this.el.object3D.visible == true) {
                    if (!this.toggle) {
                        this.toggle = true;
                        this.vid.play();
                    }
                } else {
                    this.toggle = false;
                    this.vid.pause();
                }
            }
        });

        function refrespage() {
            location.reload();
        }

        function playvid() {
            vid.play();
        }
    </script>
    <!-- IF YOU WANT TO PLAY ALPHA VIDEO THEN IT SHOULD BE IN WEBM FORMAT ........ 
    FOR NORMAL VIDEO - MP4 or OGG -->
</head>

<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 60; canvasWidth: 200; canvasHeight: 200'>
        <a-assets>
            <video preload="auto" id="vid" poster="https://i.vimeocdn.com/portrait/22542730_640x640" response-type="arraybuffer" loop="false" crossorigin webkit-playsinline playsinline controls>
                <source  src="https://www.skylinewebcams.com/9eb747a2-afe1-46ae-a603-cf4ebc10e3e5">
              ...