Disable user action on video

mpastell commented 9 years ago

It would good if nice if you could disable user input from video. I'm working on behavioral coding software (https://github.com/mpastell/CowLog) that can play multiple videos simultaneously and I don't want the users to accidentally interact with the videos.

I solved the problem for now by using a custom version of wcjs-player with surface click actions and pointer cursor on videos removed.

Thanks for a very useful project!

jaruba commented 9 years ago

disable user input from video

do you mean to disable the .togglePause() from the canvas click event?

or all user input? (no toolbar either)

mpastell commented 9 years ago

For my purpose all user events and the toolbar. I removed the fullscreen option and pause for now.

jaruba commented 9 years ago

so you don't need the fullscreen feature at all?

mpastell commented 9 years ago

In this case no.

By the way, I'm going to add links to your project on the website and repo as soon as it is included in the released version.

jaruba commented 9 years ago

Check out this black magic one liner that does exactly what you want (with multiscreen set to true):

player.find(".wcp-surface").unbind("click").unbind("dblclick").css("cursor","default","important");

Full HTML example (based on the node-vlc-multiscreen example):

<html>
    <head>
        <style>
            body,html{
                width: 100%;
                height: 100%;
                padding: 0px;
                margin:0px
            }
            .webchimeras {
                float: left;
                width: 50%;
                height: 50%
            }
        </style>
    </head>
    <body>
        <div id="player"></div>
        <div id="player2"></div>
        <div id="player3"></div>
        <div id="player4"></div>
        <script>

        function createPlayer(selector,mrl) {
            var newPlayer = new wjs(selector).addPlayer({ multiscreen: true, autoplay: true, loop: true });
            newPlayer.addPlaylist({
                url: mrl,
                crop: "16:9"
            });
            newPlayer.find(".wcp-surface").unbind("click").unbind("dblclick").css("cursor","default","important");
            return newPlayer;
        }

        var wjs = require("wcjs-player");

        player = createPlayer("#player","http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4");
        player2 = createPlayer("#player2","http://archive.org/download/CrayonDragonAnAnimatedShortFilmByTonikoPantoja/Crayon%20Dragon%20-%20An%20animated%20short%20film%20by%20Toniko%20Pantoja.mp4");
        player3 = createPlayer("#player3","http://archive.org/download/CartoonClassics/Mel-O-Toons__Peter_and_the_Wolf.mp4");
        player4 = createPlayer("#player4","http://archive.org/download/popeye_patriotic_popeye/popeye_patriotic_popeye.ogv");

        </script>
    </body>
</html>

By the way, I'm going to add links to your project on the website and repo as soon as it is included in the released version.

Awesome! :)

mpastell commented 9 years ago

Excellent, thanks for the very quick response!

jaruba commented 9 years ago

I'll make a PR :)

jaruba commented 9 years ago

Done! https://github.com/mpastell/CowLog/pull/2

jaruba / wcjs-player

Disable user action on video #17