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 :

            "id"        : 1,
            "name"      : "home",
            "bigpic"    : "",
            "smallpic"  : "",
            "video"     : ""
            "id"        : 2,
            "name"      : "Tree",
            "bigpic"    : "",
            "smallpic"  : "",
            "video"     : ""

and index file

<!DOCTYPE html>
    <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="" />
    <script src="jquery-1.11.0.js" type="text/javascript"></script>
    <script src="" 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 -->
        var output = '';

            url: '',
            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("'  '")>'  
                             '</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

    <!--this script is for every time i select person -->
        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 ==
                            showOnTheSecondPage  =   '<br>'  
                                    '<img src="'   value.smallpic   '">'    '<br>'  
                                    '<img src="'   value.bigpic   '">'   '<br>'  
                                    '<video id="aa" controls preload="auto">'  
                                    '<source src="'   '"'  
                                    'type="video/webm'   '">'  
                                    'Your browser does not support the video tag'  

                            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);


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

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

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

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

            // Webkit for video elements only
       // }

<!-- This is the first page -->
<section id="firstpage" data-role="page">
    <div data-role="header">
        <h1>Page Content Header</h1>
    <!--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">

    <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 data-role="footer">
        <h2>Page Content Footer</h2>

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

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

    <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 data-role="footer">
        <h2>Page Content Footer</h2>

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:


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s