Problem to enter to fullscreen mode when playing video using addEventListener

i have two files , because i have the line document.getElementById(“aa”).addEventListener(‘play’, asaf, false);
when i press play i enter to function asaf , but the video not showing in fullscreen mode,
but if i remove the line i mention
and i just call to asaf() instead then it’s work good .
what is the problem with thw line that i mention ?

json file :


{
    "articles":[
        {
            "id"        : 1,
            "name"      : "home",
            "bigpic"    : "https://c9.io/a1_shay/blabla/workspace/home-big.png",
            "smallpic"  : "https://c9.io/a1_shay/blabla/workspace/home-small.png",
            "video"     : "https://c9.io/a1_shay/blabla/workspace/homeVid.webm"
        },
        {
            "id"        : 2,
            "name"      : "Tree",
            "bigpic"    : "https://c9.io/a1_shay/blabla/workspace/tree-big.png",
            "smallpic"  : "https://c9.io/a1_shay/blabla/workspace/tree-small.png",
            "video"     : "https://c9.io/a1_shay/blabla/workspace/homeVid.mp4"
        }
    ]
}

and index file


<!DOCTYPE html>
<html>
<head>
    <title>First jQuery Mobile Example</title>
    <!--<link rel="stylesheet" type="text/css" href="css/video.css">-->
    <!-- the three things that jQuery Mobile needs to work -->
    <link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" />
    <script src="jquery-1.11.0.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width"/>

    <!--this script is for getting data from json file save it to .data() in jquery .and display list of all persons in the list -->
    <script>
        var output = '';

        $.ajax({
            url: 'https://c9.io/a1_shay/blabla/workspace/myFirstJson.json',
            dataType: 'json',
            type: 'get',
            cache: false,
            success: function(data)
            {
                <!--this line is to save the data that come from the json,because i don"t want to make another call to the json file-->
                <!--in the next script i call to this data.-->
                <!--the "div" is an element i choose it doesn't matter what i choose,i just must to have in my page some tag of "div"-->
                <!--it doesn't effect him at all-->
                $("div").data("myDataFromJson", data.articles);
                <!--here i create the li for every item that i get from json  -->
                $(data.articles).each(function(index, value)
                        {
                            output  = '<li>'  
                                    '<a href="'   '#secondpage'   '" onclick=getDataById("'  value.name  '")>'  
                                    value.name   '</a>'   '</li>';
                        }
                )
                console.log(output);//the output represent all the li i build in the loop
                var update = document.getElementById('listOfItemes');//getting the element that i want to insert to him the data
                update.innerHTML = output;//insert the data to the element
                $('#listOfItemes').listview('refresh');//must refresh element that hold li
            }
        })
    </script>

    <!--this script is for every time i select person -->
    <script>
        function getDataById(id)
        {
            var showOnTheSecondPage = '';

            <!--here i iterate the list again and search the person the first page select , ones i found this person-->
             <!--i display all information on that person-->
            $($("div").data("myDataFromJson")).each(function(index, value)
                    {
                        if(id == value.name)
                        {
                            showOnTheSecondPage  = value.name   '<br>'  
                                    '<img src="'   value.smallpic   '">'    '<br>'  
                                    '<img src="'   value.bigpic   '">'   '<br>'  
                                    '<video id="aa" controls preload="auto">'  
                                    '<source src="'   value.video   '"'  
                                    'type="video/webm'   '">'  
                                    'Your browser does not support the video tag'  
                                    '</video>';

                            var updateSecondPage = document.getElementById('detailsOnPerson');//getting the element that i want to insert to him the data
                            updateSecondPage.innerHTML = showOnTheSecondPage;//insert the data to the element
                            document.getElementById("aa").addEventListener('play', asaf, false);

                        }
                    }
            )
        }
    </script>

    <script>
        function asaf(){
        //document.getElementById("aa").addEventListener('play', dimBack, false);

            var i = document.getElementById("aa");
            console.log(i);

            // go full-screen
            if (i.requestFullscreen) {
                i.requestFullscreen();
            } else if (i.webkitRequestFullscreen) {
                i.webkitRequestFullscreen();
            } else if (i.mozRequestFullScreen) {
                i.mozRequestFullScreen();
            } else if (i.msRequestFullscreen) {
                i.msRequestFullscreen();
            }

        //function dimBack() {
            //this.removeEventListener('play', dimBack, false);
            //alert("aaa");
           // var temp = document.getElementById('aa');
            // Mozilla
            //temp.requestFullscreen();

            // Webkit for video elements only
            //temp.webkitRequestFullscreen();
       // }
        }
    </script>
</head>
<body>

<!-- This is the first page -->
<section id="firstpage" data-role="page">
    <div data-role="header">
        <h1>Page Content Header</h1>
    </div>
    <!--here i display a list of all persons . that info will come from script -->
    <ol data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" id="listOfItemes">
    </ol>

    <div class="ui-content" role="main">
        <p>This is the content on page 1</p>
        <p><a href="#secondpage">Go to second page</a></p>
    </div>
    <div data-role="footer">
        <h2>Page Content Footer</h2>
    </div>
</section>

<!-- This is the second page -->
<div id="secondpage" data-role="page">
    <div data-role="header">
        <h1>Page Content Header</h1>
    </div>

    <!--here all the info of one person will display. that info will come from script -->
    <div id="detailsOnPerson">
    </div>

    <div class="ui-content" role="main">
        <p>Page 2 has different content on it</p>
        <p><a href="#firstpage">Go to first page</a></p>
    </div>
    <div data-role="footer">
        <h2>Page Content Footer</h2>
    </div>
</div>

</body>
</html>
Advertisements
This entry was posted in כללי and tagged . Bookmark the permalink.

One Response to Problem to enter to fullscreen mode when playing video using addEventListener

  1. asafshay says:

    this answer for that i need to change the event , Instead of using ‘play’ i use ‘click’.

    the answer i found in stackoverflow :

    “for security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a ‘click’. You can’t have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule.
    So an alternative solution would be to request fullscreen in a click event”

    good example with other options:
    https://github.com/sindresorhus/screenfull.js

    Like

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