Youtube embeds?

Help
RBRat3
2012-02-06
2014-03-02
1 2 > >> (Page 1 of 2)
  • RBRat3
    RBRat3
    2012-02-06

    Well I finally got youtube videos to embed but ran into a problem the DOM gets updated every message causing the youtube video to re-embed itself reseting the playback when a message gets posted after (Does this with gifs if you ever notice).

    So after some thought even if it worked flawlessly it would be impractical when multiple chatters are chatting it would just get pushed off the list. With that in mind what I would like to know is if if you could run 2 chatlists where one is the main chatlist and the other looks for BB tags like   and posts it there that way it only gets updated every posting of that tag. Only real issue I see is users have to fight over it but it should give ample viewing time.

    Concept image

    Id probably give it its own dedicated panel

     
  • RBRat3
    RBRat3
    2012-02-06

    Woops sry for the large embed, Thought it would resize and I can find an edit button anywhere.

     
  • Patryk Derda
    Patryk Derda
    2012-03-02

    Yikes I wanna also have this request ;), and with soundcloud too, just change it to be in footer, cause it's better solution when adding in content to 70-75% in .css…

    Yea i tried myself to add in codes for postng video, but it damn refreshes the whole idea, and you have to push play again ::(

    Also if someone could do this, it needs to be refreshed upon new code ;)

     
  • Dust
    Dust
    2012-03-22

    In js/chat.js change addMessageToChatList function to the following:

    addMessageToChatList: function(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip) {
            // Prevent adding the same message twice:
            if(this.getMessageNode(messageID)) {
                return;
            }       
            if(!this.onNewMessage(dateObject, userID, userName, userRole, messageID, messageText, channelID, ip)) {
                return;
            }
            this.DOMbufferRowClass = this.DOMbufferRowClass == 'rowEven' ? 'rowOdd' : 'rowEven';
            var rowClass = this.DOMbufferRowClass;
            var userClass = this.getRoleClass(userRole);
            var colon;
            if(messageText.indexOf('/action') == 0 || messageText.indexOf('/me') == 0 || messageText.indexOf('/privaction') == 0) {
                userClass += ' action';
                colon = ' ';
            } else {
                colon = ': ';
            }
            var dateTime = this.settings['dateFormat'] ? '<span class="dateTime">'
                            + this.formatDate(this.settings['dateFormat'], dateObject) + '</span> ' : '';
    
            var divNode = document.createElement ('div');
            divNode.setAttribute ('id', this.getMessageDocumentID(messageID));
            divNode.setAttribute ('class', rowClass);
    
            divNode.innerHTML = this.getDeletionLink(messageID, userID, userRole, channelID)
                    + dateTime
                    + '<span class="'
                    + userClass
                    + '"'
                    + this.getChatListUserNameTitle(userID, userName, userRole, ip)
                    + ' dir="'
                    + this.baseDirection
                    + '" onclick="ajaxChat.insertText(\'[i]\'+this.firstChild.nodeValue+\'[/i], \');">'
                    + userName
                    + '</span>'
                    + colon
                    + this.replaceText(messageText);
            this.dom['chatList'].appendChild (divNode);
            this.DOMbuffer = "";
        },
    

    when multiple chatters are chatting it would just get pushed off the list

    There is Autoscroll On/Off switch in the right bottom corner.

     
  • RBRat3
    RBRat3
    2012-04-06

    You sir are a godsend!!!!!!!!!!!!!!!! Cheers

     
  • YIFY
    YIFY
    2012-04-13

    Thats a pretty cool approach, instead of adding youtube bbcode tags (like your ) I went a head

    Instead I went ahead and made a new button for it which essentially inserts and pushes into chat a /yt http:youttubelink.comwhat=v?saud which was later passed to some php handling and then to the java script for display

    and then it drops the embbeded video in a jquery  slider from the top so users can pick what video to watch and can continue to talk while video plays

    here is a few pictures of what I ended up doing (took me freaking AGES to get this working using the titles of the video)


    and


     
  • RBRat3
    RBRat3
    2012-04-16

    I approve this method more than my original, Having floating windows is a much more elegant solution.

     
  • Phoenix psyhub
    Phoenix psyhub
    2012-04-17

    Can you drop the code in so us mere mortals can update our version of AjaxChat and get similar outcomes??

    (I really am struggling with some of the code here … I don't like Javascript! lol)

     
  • YIFY
    YIFY
    2012-04-17

    I am away from PC I will post my code start of next week when back home :)

     
  • Phoenix psyhub
    Phoenix psyhub
    2012-04-18

    You star!!! Very much appreciated! :)

     
  • RBRat3
    RBRat3
    2012-04-19

    Out of curiosity what was your embed method?
    I left mine the way it was since I dont see any reason to change it till a problem surfaces but I had an issue where sound would stop working on a refresh when a flash embed was present. To get rid of the issue I used youtubes iframe embed method to get rid of it so I wondered what you were using.

     
  • YIFY
    YIFY
    2012-04-21

    I used the you-tube iframe to embed the videos such as: <iframe src="http://www.youtube.com/embed/c169imRL2fQ" frameborder="0"></iframe>

    anyways, here is how I went about it:

    insert a new IRC-like command in AJAXChat.php.
    You will find the commands withing the claus:

    // Parse IRC-style commands:
    if(strpos($text, '/') === 0) {
    

    YOUTUBE COMMAND:

    // youtube:
    case '/yt':
    $this->insertParsedMessageYT($textParts);
    break;
    

    also make a new function to process this command:
    http://pastie.org/3826171  <-- code is much easier to view on pastie IMO
    what this function does is, it grabs the youtube url that you put in AFTER the the command and extracts the youtube Video ID out of it (getting rid of all the other junk that the link may contain)

    Later we can use the video ID to chuck it in the embed URL that later will be placed inside the iframe.
    'http://www.youtube.com/embed/'.$my_array_of_vars_.'?rel=0&border=0&autoplay=1';_  <- the rel and autoplay at the end of the link make the video autoplay as soon as its embedded and also NOT show related videos and other junk at the end of the video.

    at the end of it all we have Chat_bot outputting a message saying: YouTubeVideoTitle http://www.youtube.com/embed/JKDHUIaw?rel=0&border=0&autoplay=1

    now go ahead and modify your chat.js file

    find the function: getChatListMessageString and replcae the bottom code with this:
    http://pastie.org/3826236

    what this does it test the TEXT and if the text contains a youtube embed link that it will modify the out put on the chat window, it grabs the title on the youtube video and the final HTML div output will be:
    <a href="#" title="Click to open youtube clip." onclick="youtubeJS(\'' + FINALyoutubelink + '\')"><img src="img/youtube.png" alt="YOUTUBE" /> ' + FINALyoutubetitle + '<img src="img/youtube.png" alt="YOUTUBE" /></a>';

    now last thing is to add this function that we are now calling called youtubeJS() Which uses the you-tube link.

    function youtubeJS(youtubeLink){
    video.html('<iframe width="480" height="320" src="' + youtubeLink + '" frameborder="0"></iframe>');
    

    this will embed the video and start playing it automatically in a div called 'video' now its up to you to adjuct how to display the video itself weather it be in a new tab or in a floating div etc, all you need to do is make some fancy jquery function inside the youtubeJS() function

    hope this helps somone, and sorry about my English being a bit bad.

     
  • Phoenix psyhub
    Phoenix psyhub
    2012-04-21

    I refined the php to go in the custom commands in CustomAJAXChat.php - it means it can be taken from one version of the chat software to another …

            case '/yt':
                    if(count($textParts) == 2){
                            //Grabs the youtubeID
                            parse_str( parse_url( $textParts, PHP_URL_QUERY ), $my_array_of_vars );
                            if ($my_array_of_vars != null){
                                    //ChatbotDisplay Message
                                    $YTembedLink = 'http://www.youtube.com/embed/'.$my_array_of_vars.'?rel=0&border=0&autoplay=1';
                                    $ch = curl_init();
                                    curl_setopt($ch, CURLOPT_URL, 'http://gdata.youtube.com/feeds/api/videos/'.$my_array_of_vars);
                                    curl_setopt($ch, CURLOPT_HEADER, 0);
                                    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
                                    $response = curl_exec($ch);
                                    curl_close($ch);
                                    if ($response) {
                                            $xml = new SimpleXMLElement($response);
                                            $YouTubetitle = (string) $xml->title;
                                    } else {
                                            // Error handling.
                            //ERROR not valid Link
                            $this->insertCustomMessage(
                                    $this->getUserID(),
                                    $this->getUserName(),
                                    $this->getUserRole(),
                                    $this->getChannel(),
                                    "Error, link is not valid"
                            );
                                    }
                                    $this->insertCustomMessage(
                                            $this->getUserID(),
                                            $this->getUserName(),
                                            $this->getUserRole(),
                                            $this->getChannel(),
                                    $YouTubetitle.' '.$YTembedLink
                                    );

                            }
                            else{
                            //ERROR not valid Link
                            $this->insertCustomMessage(
                                    $this->getUserID(),
                                    $this->getUserName(),
                                    $this->getUserRole(),
                                    $this->getChannel(),
                                    "Error, link is not valid"
                            );
                            }
                    } else {

                            //ERROR not valid Link
                            $this->insertCustomMessage(
                                    $this->getUserID(),
                                    $this->getUserName(),
                                    $this->getUserRole(),
                                    $this->getChannel(),
                                    "Error, link is not valid"
                            );
                    }
                                    return true;
                            default:
                                    return false;
            break;

    I will do something similar with the javascript (if my skills allow!!)

    Is it possible you could drop in the code that you have used to make the div float? (I am not good with JS)

    Btw - your english is excellent! :)

     
  • YIFY
    YIFY
    2012-04-21

    thats cool: here is exactly what I have in my flaoting div:

    in the /chat/lib/template/LoggedIn.html file I had added this JS file to the head:
    <script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="UTF-8"></script>

    and also this CSS was addedd to the head:

    <style type="text/css">
        #sliderWrap {margin: 0 auto; width: 500px; z-index:500;}
        #slider { position: absolute; background-color:#404040; width: 510px; height: 365px; margin-top: -365px; -moz-border-radius-bottomright: 20px; border-bottom-right-radius: 20px; -moz-border-radius-bottomleft: 20px; border-bottom-left-radius: 20px;}
        #slider img {border: 0;}
        #sliderContent {margin: 50px 0 0 50px; position: absolute; text-align:center; background-color:#FFFFCC; color:#333333; font-weight:bold; padding: 10px;}
        #header { margin: 0 auto; width: 600px; background-color: #F0F0F0; height: 200px; padding: 10px; }
        #openCloseWrap { position:absolute; top:0; left:15px; font-size:12px; font-weight:bold; }
        #video{ margin-left: 15px; margin-top: 30px;}
        </style>
    

    add this HTML code to the documented too:

    <div id="sliderWrap">
                <div id="openCloseIdentifier"></div>
                <div id="slider">
                    <div id="video">
                    </div>
                    <div id="openCloseWrap">
                        <a href="#" onclick="youtubeJS('')" id="topMenuImage">
                        </a>
                    </div>
                </div>
            </div>
    

    I put that HTML div above the <div id="inputFieldContainer"> div

    and now final here is the slightly customized jquery file that you need to download and place in the JS folder ( this is the jquery-1.2.6.min.js file which has the the youtubeJS function in it):
    http://pastebin.com/FCNz0ttv
    or just download from http://174.127.97.227/chat/js/jquery-1.2.6.min.js

     
  • Phoenix psyhub
    Phoenix psyhub
    2012-04-21

    Thank you so much for posting that, but I must me doing something very wrong …
    I've updated the php to add a  tag before,  in the middle and  at the end.
    The custom.js looks like:

    ajaxChat.replaceCustomText = function(text) {
        if (text.indexOf('') == 0) {
                text=text.replace(//gi, '<a href=javascript:youtubeJS(\'');
                text=text.replace(//gi, '\')>');
                text=text.replace(//gi, '</a>');
        }
        return text;
    }

    This has the upshot of killing the browser stone dead - I have no idea what's causing the problem :S - any help??

     
  • Lyra
    Lyra
    2012-04-22

    Hello Yify, I just wanted to thank you for this tutorial, it's something I've been looking for for a while.
    I've finished your tutorial, but only managed to get to do this:

    "at the end of it all we have Chat_bot outputting a message saying: YouTubeVideoTitle http://www.youtube.com/embed/JKDHUIaw?rel=0&border=0&autoplay=1"

    The chatbot does not say that, but the person who posted says it, which is fine to me, but nothing else works and I've completed the tutorial. All the way down to modifying the loggedin.html

    I hope that you can provide some insight as to what I am doing wrong.

     
  • YIFY
    YIFY
    2012-04-22

    ok a little of syntax looks a little wrong, first of all you can not use the square brackets in the regular expression find.  so for example try using  yt1, yt2 and yt3 (could be something I am missing with the squre bracket thought not too sure, thats never worked for me)

    Secondly there are a few checks that goes on in the replaceText: function(text) function, not only replaceCustomText

    You will need to make a seporate function just for you-tube and then make sure the rest of the code stops; because it will break chat such as: replaceHyperLinks function will ruin your whole method and make chat break lol

    this is what I did (I altered my code to make it similar to your cause I like your idea, much simpler)

    add a new function in chat.js (your one above is a quotation or two missing on yt1 and yt2:

    replaceYoutube: function(text) {
            text=text.replace(/yt1/gi, '<a href="#" onclick="javascript:youtubeJS(\'');
            text=text.replace(/yt2/gi, '\')">');
            text=text.replace(/yt3/gi, '</a>');
            return text;
        },
    

    now go to your replaceText: function(text) function in chat.js and add an if statement to make sure that the other replace text dont run after you do your youtube method

    replaceText: function(text) {
            try{
                if(this.replaceYoutube(text) != text){
                    text = this.replaceYoutube(text);
                }
                else{
                    text = this.replaceLineBreaks(text);
                    if(text.charAt(0) == '/') {
                        text = this.replaceCommands(text);
                    } else {
                        text = this.replaceBBCode(text);
                        text = this.replaceHyperLinks(text);
                        text = this.replaceEmoticons(text);
                    }
                    text = this.breakLongWords(text);       
                    text = this.replaceCustomText(text);
                }
            }
    

    I have not tested this as I am pretty happy with the method I put in and seemed to work. hope this is solution for you maybe?  just bare in mind I have test this solution for you so not 100% sure if will work or not

    hope it makes sense

     
  • YIFY
    YIFY
    2012-04-22

    @lyra-26

    Sorry my tutorial is very bad layout. and not so easy to rea.  you are right with my code It has the person saying the Youtube messege having output the youtube link/tite

    modifying the chat.js will only alter the look on how the link is laid out. I dont know how to better explain what I did. just make sure you edit the right part of the getChatListMessageString function.  if you can post your whole getChatListMessageString function in pastie or something and maybe I can have look? sorry for the such little support I can give :(

     
  • Phoenix psyhub
    Phoenix psyhub
    2012-04-22

    I think it was creating a race condition between that bit of code and the code that looks for "" tags.
    If I change it to "=yt1=" and so on, we have a nice little tag system that is separate.

        if (text.indexOf('=yt1=') == 0) {
                text=text.replace(/=yt1=/gi, '<a href="javascript:youtubeJS(\'');
                text=text.replace(/=yt2=/gi, '\')">');
                text=text.replace(/=yt3=/gi, '</a>');
        }

    And that is still in custom.js

    So, now I have the correct link being re-written by the javascript - I have noticed a few files that obviously I don't have (like img/close.png) - the display box appears (which made me quite excited!), but it just displays a blank box.

    Do I need a file called video.html?? or has something else gone wrong?

     
  • YIFY
    YIFY
    2012-04-22

    oh cool, thanks for the info regarding the

    shoudlnt need anything else; if you are reffering to this line:
    $("#video").html('<iframe width="480" height="320" src="' + youtubeLink + '" frameborder="0"></iframe>');

    what it does in insert html code (whats in the parenthesis) int the div with the ID tag of 'video'

    Oh dont forget the css since it set the positions of the all the divs

    use some debugger like firebug to make sure that the link comes out correctly; so in your case something like this?

    <a href="javascript:youtubeJS('http://www.youtube.com/embed/-z4E8mGPwME')">VideoTitle</a>
    

    (also make sure there there is the quotes for between the start and end of the link which you are passing to the JS which will embed the video.

    Nothing coming to mind that I missed in my initial post I dont think.

    P.S. I really like your style of coding phoenix52, much simpler than mine.

    sorry I am not much help with the debugging

     
  • Phoenix psyhub
    Phoenix psyhub
    2012-04-22

    I think "simple" describes me very well ;)

    I have enabled firebug and an error is returned when I click on the video link …
    **
    An invalid or illegal string was specified

    …ret;},clean:function(elems,context){var ret=;context=context||document;if(type…
    **
    When I mouse over it comes up with a huge line from the jquery - I have tried downloading directly from the link that was provided, just in case there was a carriage return or something - but it still throws this error.

    I'm pretty sure there's nothing I can actually have done to cause this error …
    The link generated by the /yt command, that I used is …

    <a href="javascript:youtubeJS('http://www.youtube.com/embe&#8203;d/ejorQVy3m8E?rel=0&amp;border=0&amp;auto&#8203;play=1')">Midnight Oil - Beds Are Burning</a>

     
  • YIFY
    YIFY
    2012-04-22

    Umm why id that you have a &#8203; in the embed link (embe&#8203;d and auto&#8203;play) ? that part of the link should be hard coded as: http://www.youtube.com/embed/ + VideoID + ?rel=0&amp;border=0&amp;autoplay=1

    I *assume* that it might be the illegal chars that messing everything up?

     
  • Phoenix psyhub
    Phoenix psyhub
    2012-04-22

    good grief - I said I was simple!!
    I think I need to add the /&/gi, 'amp;' or something … let me fettle and get back to you ;)

     
  • Phoenix psyhub
    Phoenix psyhub
    2012-04-22

    ok - by adding the following to the php …

    $YTembedLink = urldecode($YTembedLink);

    …I end up with …

    <a href="javascript:youtubeJS('http://www.youtube.com/embe​d/ejorQVy3m8E?rel=0&border=0&auto​play=1')">Midnight Oil - Beds Are Burning</a>

    but I still get the same error in the javascript when I click on the link :S
    Probably serves my right for trying to understand the code instead of blindly cutting and pasting! lol

     
  • YIFY
    YIFY
    2012-04-22

    alright sweet, now that you got rid of the random &#8203;

    Sorry for not stressing this out before, but you NEED the &amp; INSTEAD of the & in the final link

    In my js I had thislink of code:

    FINALyoutubelink = p2.replace(/&/gi, '&amp;');
    

    so you should maybe try add that to your code?

    If that still doesnt work… well I am not 100% what else to offer lol

    and your approach seems much better than mine, I would chnage my code to have the same kind of approach as yours if I wasnt lazy :P

     
1 2 > >> (Page 1 of 2)