Monday, 22 May 2017

javascript play video/sound from youtube/domain, source string







<html>
<head>

    <script type="text/javascript">

        var youtube_video;

        function play_youtube_video() {
            youtube_video = document.getElementById("human");

            youtube_video.style.display = "block";

            if (!youtube_video.src.includes("autoplay")) {
                youtube_video.src += "?autoplay=1";
            }
            else {
                youtube_video.src.replace("autoplay=0", "autoplay=1");
            }
        }

        function play_sound_after_3s() {
            window.setTimeout(function f_wait() {
                youtube_video = document.getElementById("human");

                if (!youtube_video.src.includes("autoplay")) {
                    youtube_video.src += "?autoplay=1";
                }
                else {
                    youtube_video.src.replace("autoplay=0", "autoplay=1");
                }

            }, 3000);
        }

        var domain_video;

        function domain_video_play() {
            domain_video = document.getElementById("video_on_domain");
            domain_video.style.display = "block";
            domain_video.play();
        }

        function domain_video_pause() {
            domain_video = document.getElementById("video_on_domain");
            domain_video.style.display = "block";
            domain_video.pause();
        }

    </script>
</head>
<body>

    <iframe style="display:none" allowfullscreen="" frameborder="0" height="315" id="human" src="https://www.youtube.com/embed/L3wKzyIN1yk" width="560"></iframe>

    <input class="button" onclick="play_youtube_video()" type="button" value="play youtube video" />
    <input class="button" onclick="play_sound_after_3s()" type="button" value="play sound track after 3s" />

    <video controls="true" id="video_on_domain" style="display: none;">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></source>
        Your browser does not support HTML5 video.
    </video>

    <br /><br />

    <input class="button" onclick="domain_video_play()" type="button" value="play video on domain" />
    <input class="button" onclick="domain_video_pause()" type="button" value="pause video on domain" />
</body>
</html>

reference:
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)