How to enter to fullscreen mode when playing video using jquery

for my project i use the next code :


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>

    <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>




    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

    <style type='text/css'>

    </style>



    <script type='text/javascript'>//<![CDATA[
    $(window).load(function(){
        var fullscreen = (function () {
            var methods = ["requestFullscreen", "mozRequestFullScreen", "webkitRequestFullscreen", "msRequestFullscreen"],
                    img = new Image,
                    lastElement,
                    method = methods.filter(function (m) {
                        return m in img
                    }).shift(),
                    fun = function (e) {
                        lastElement = this
                        method && this[method]()
                    }
            fun.element = function () {
                return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement
            }
            return fun
        })();

        function fsv() {
            console.log("fsv")
            $("#my_video").one("click", function (e) {
                console.log(this)
                if (this.paused) {
                    this.play();
                    fullscreen.call(this)
                    $(document).one("webkitfullscreenchange mozfullscreenchange MSFullscreenChange msfullscreenchange fullscreenchange", fsv)
                }
            });
        }
        fsv()
    });//]]>

    </script>


</head>
<body>
<video id=my_video controls>
    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
    <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
    <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>

</body>


</html>

if for any reason the link to the js file is missing here link to download:
https://bitbucket.org/a1shay1979/video-in-jquery

but if anyone want here good example with many options in:
https://github.com/sindresorhus/screenfull.js

another example not for fullscreen just things you can do :


<!DOCTYPE HTML>
<html>
<body style="background-color: white"> 
<div id="dimMe" style="background-color:blue">
    <video id="video" autobuffer controls muted width=240 height=200>
        <source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v">
        </source>
    </video>
</div>
<script>
document.getElementById("video").addEventListener('play', dimBack, false);

function dimBack() {
    this.removeEventListener('play', dimBack, false);
    document.getElementById("dimMe").style.backgroundColor="green";
}
</script>
</body>
</html>

another exsampe is fullscreen to video and picture :
https://bitbucket.org/a1shay1979/fullscreen-with-button

Advertisements
This entry was posted in כללי and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s