SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Show JW Player

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show JW Player

    down vote favorite


    I have page that has a text input and a button the user must fill a URL which is referring to a playable media file(mp4) in the text field and click the button

    when the button is clicked the a script is running and ajax is passing the url value to PHP file which do some verifications and send the response back

    if every thing is ok it should replace the DIV tag with JW player and the user can play the media

    I test the whole process by replacing the DIV tag with a plain text or image and it worked smoothly

    and when I tried to replace it with the jw player component it is not showing any thing

    I tested the jw by inserting it directly in the HTML code and it worked smoothly

    here is the full index.html

    Code:
    <!DOCTYPE html>
        <html>
        <head>
        <script type="text/javascript" src="/ajax4/jwplayer.js"></script>
        <script type="text/javascript">jwplayer.key="RXVe0CXFsIS8pAar5ezgSLJqb9jfx7rDOBxkVw==";</script>
        <script type="text/javascript"><!--
    
        function get_XmlHttp() {
          var xmlHttp = null;
    
          if(window.XMLHttpRequest) {       // for Forefox, IE7+, Opera, Safari, ...
            xmlHttp = new XMLHttpRequest();
          }
          else if(window.ActiveXObject) {   // for Internet Explorer 5 or 6
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
    
          return xmlHttp;
        }
    
        // sends data to a php file, via POST, and displays the received answer
        function ajaxrequest(php_file, tagID) {
          var request =  get_XmlHttp();     // call the function for the XMLHttpRequest instance
    
          // create pairs index=value with data that must be sent to server
          var hiturl = document.getElementById('hit').value;
          var  the_data = 'hiturl='+hiturl;
    
          request.open("POST", php_file, true);         // set the request
    
          // adds  a header to tell the PHP script to recognize the data as is sent via POST
          request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          request.send(the_data);       // calls the send() method with datas as parameter
    
          // Check request status
          // If the response is received completely, will be transferred to the HTML tag with tagID
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              document.getElementById(tagID).innerHTML = request.responseText;
            }
          }
        }
        --></script>
    
        </head>
        <body>
        <form action="test_form.php" method="post" name="form1" onsubmit="ajaxrequest('hitphp.php', 'myDiv'); return false;">
        <label for="name" id="name_label">hit URL: </label>  
        <input type="text" name="hit" id="hit" size="100"  /> 
        <input type="submit" value="Enter hit UrL" />
    
        </form>
        <div id="myDiv"></div>
    
        </body>
        </html>
    ==================================================================
    
    
    and the hitphp.php file
    ===================================================================
    <?php
        // if data are received via POST
        if (isset($_POST['hiturl'])) {
          // get data into variables, deleting the html tags
          $hiturl = strip_tags($_POST['hiturl']);
    
          // if the form fields are completed
          if (true) {
            if (true) {
    
    
        echo'<div id="myElement">nnnnn.....</div><script type="text/javascript">
    jwplayer("myElement").setup({
    
        type:"mp4", 
        bufferlength: "60",
        file: "mediaurl",
    
    
    });
    
    
    </script>';
    
    
    
    }else{
    echo 'sorry not a valid url';
    }
          }
          else {
            echo 'Fill in all form fields';
          }
        }
        ?>
    Thanks in advance
    Last edited by paul_wilkins; Mar 31, 2013 at 06:21. Reason: code tags

  2. #2
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any suggestions guys?

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,067
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    I found a good answer to your question here:

    http://stackoverflow.com/questions/2...with-innerhtml
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot ... it is great hint ... but I tried following the recommendations in the site but also not working I added the following lines in the ajax script
    ===============================================
    if (request.readyState == 4) {

    var div = document.createElement('div');
    div.innerHTML = request.responseText;
    var children = div.childNodes;
    myDiv.innerHTML = "";
    for(var i=0;i<children.length;i++)
    myDiv.appendChild(children[i]);
    =================================


    Quote Originally Posted by ScallioXTX View Post
    I found a good answer to your question here:

    http://stackoverflow.com/questions/2...with-innerhtml


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •