WordPress.org

Ready to get started?Download WordPress

Forums

Adding streaming video to a post (21 posts)

  1. Dobie
    Member
    Posted 9 years ago #

    I'm looking into adding video into a post. I've searched the site and found a couple things but nothing works right for me. What I'm trying to do is have the player with the video pop up in a post and when someone clicks play, it will play. Any ideas out there?
    Thanks in advance.

  2. rafleet
    Member
    Posted 9 years ago #

    Hi,

    I used an EMBED tag, to put my videos on one of my project sites. Here is the code I used on this page...

    http://survivalring.org/yaaaonline/?page_id=8

    <div align=center>
    <embed SRC=http://www.survivalring.org/Think.mpg WIDTH=400 HEIGHT=300 AUTOPLAY=false CONTROLLER=true LOOP=false ></embed>
    Click on the PLAY button. Or, RIGHT CLICK here and SAVE AS to your computer, and then OPEN after download completes.
    </div>

    (By the way, this one minute video won a coveted Telly Award this past June....see other vids at http://www.yaaaonline.com)

    I've not had any problems with anyone (yet) not being able to see the video, so I assume it works for most.

    The same embed tag can be used for any multimedia file.

    Rich

  3. Dobie
    Member
    Posted 9 years ago #

    Rich,
    So far your code works the best of what I've tried. What's on your site is exactly what I'm going for, but it doesn't work on mine. 1. You have a Quicktime looking window for your video, mine is more like Windows Media Player. 2. Mine plays automaticly when the page loads. I copied your code exactly. Would the fact I code my video as a .wmv file be doing anything? Thanks again.
    Shawn

  4. bhope
    Member
    Posted 8 years ago #

    I did try to embed the video as follows:

    <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://mysite.com/vidoe.wmv" name="MediaPlayer1" width=400 height=282 autostart=0 showcontrols=1 volume=-20></embed>

    The player loads in the page, but the page never fully loads. Anyone know why?

    I tried putting the object on the page but that just screws up the look of the page.

  5. TH
    Member
    Posted 8 years ago #

    rafleet, that can't be right. It doesn't validate at all, at least not for me. I had to put in some extra parameters in order to have the player controls display properly. It still doesn't validate tho, starting with the first div center tag. ("an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.")

    Could someone please have a look?
    The embed code is now:

    <div align=center>
    <embed SRC=http://www.siteadress/video/Movie.mp4 WIDTH=352 HEIGHT=288 AUTOPLAY=false CONTROLLER=true LOOP=false playeveryframe=false moviename=Movie.mp4 kioskmode=false targetcache=false pluginspage=http://www.apple.com/quicktime/ scale=TOFIT></embed>
    Click PLAY to see the film.
    </div>

    http://www.pohildre.com/video/

  6. lynk
    Member
    Posted 8 years ago #

    as far as i remember, align="center" is not valid in xhtml.
    and you have to quote all attribute values like width="352" and all attribute names like height must be lowercase.

  7. TH
    Member
    Posted 8 years ago #

    Hmmm. No. Quoting attribute values increases the number of validation errors from 6 to 13. I did try everything in lowercase as well, but it doesn't seem to make any difference. Also I don't know what to use instead of center. Maybe define a class for it and center it in the css?

    Maybe I should try a plugin to do my embedding? Has anyone had any experience with any of them? Fallen Media Filter perhaps?

    Thank you lynk for your suggestions.

  8. lynk
    Member
    Posted 8 years ago #

    this is valid:
    <div>
    <embed src="http://www.siteadress/video/Movie.mp4" width="352" height="288" autoplay="false" controller="true" loop="false" playeveryframe="false" moviename="Movie.mp4" kioskmode="false" targetcache="false" pluginspage="http://www.apple.com/quicktime/" scale="TOFIT"></embed>
    Click PLAY to see the film.
    </div>

    center via css.

  9. TH
    Member
    Posted 8 years ago #

    No, I'm afraid that didn't solve it, except for the center-error going away. Still get 13 different errors. Removing all the quotes reduce this to 5 errors, 4 of which are related to the start of the movie path itself. "there is no attribute src", it says. Sigh. Wish I had a bigger brain.

    The other complaints are:

    an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.

    NET-enabling start-tag not immediately followed by null end-tag.

    element "embed" undefined.

    end tag for element "embed" which is not open.

  10. m4c3w4n
    Member
    Posted 8 years ago #

  11. TH
    Member
    Posted 8 years ago #

    No, that one won't do. Cannot play videos directly. They will each have to be converted to .flv files using a program that doesn't run on a Mac. I have a Mac. I'm looking for a way to embed videos as they are. Something that doesn't cost money or require external hosting.

  12. lynk
    Member
    Posted 8 years ago #

    so it doesn't validate but the video plays fine?
    then it doesn't validate - that won't hurt anyone.

  13. TH
    Member
    Posted 8 years ago #

    It's not a question of it causing irreparable damage. I just want to see if there is a better way of doing it. Errors indicate that something is not working perfectly. Errors are bad.

  14. TH
    Member
    Posted 8 years ago #

    Here is another idea: What if I create a thumbnail and then have it so that people can click on it and see the video in a popup window. That would look great. And I could have many videos listed on one page.

    But how to make popup pages that has a set window size and plays a movie file? If anyone knows this, I would love to know. Thanks.

  15. TH
    Member
    Posted 8 years ago #

    Ok... I figured it out.

  16. TH
    Member
    Posted 8 years ago #

    A little later: Jarret dropped me a line asking to know what I meant by saying that I figured it out. So here is what I did in case anyone else finds this thread and wants to have a try:

    I should point out right at the beginning that this solution gives me a couple of validation errors. But it works perfectly.

    First I made a custom page by copying index.php in my theme-directory and adding the lines:

    <?php
    /*
    Template Name: Video
    */
    ?>

    At the very beginning, thereby making it a new page template.

    At the very end of the same page I added:

    <html>
    <head>
    </head>
    <body>
    <SCRIPT TYPE="text/javascript"><!--
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
    href=mylink;
    else
    href=mylink.href;
    window.open(href, windowname, 'width=384,height=304,scrollbars=no');
    return false;
    } // -->
    </SCRIPT>
    </body>
    </html>

    Which is the javascript that pops up windows. As you can see there is a set size in it. This includes 16 pixels of player controls needed for a quicktime movie.

    I haven't tried this without the html-and body tags. Perhaps that would be more correct. I don't know.

    I saved the the template as video.php and uploaded it to my theme directory.

    WordPress: Manage/Pages/Create New Page.

    Choose "Video" in the Page Template dropdown box instead of Default Template. Create the page.

    Under manage pages, the page Video should now be listed. Edit it.

    In the Page Content-window, I wrote:

    <code><a href="http://www.blabla.com/wp-content/video/video1.htm" onClick="return popup(this, 'video1');if(this.blur)this.blur()" onFocus="if(this.blur)this.blur()"><img src=" http://www.blabla.com/wp-content/video/video1.jpg"/></a></code>

    The may be completely misused here. I don't know if it's really intended to use when inputing code. It works at least.

    This code pops up the html-document "video1.htm" from the thumbnail "video1.jpg"

    To my video-directory http://www.blabla.com/wp-content/video/
    I have uploaded the video file named video1.mp4 (encoded as streaming quicktime mov-video with an mp4 compression, or else mp4 won't work).
    I have also uploaded the thumbnail video1.jpg and the html-document video1.htm, which consists of the following code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Video title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="384" height="304">
    <param name="autoplay" value="true">
    <param name="controller" value="true">
    <param name="pluginspage" value="http://www.apple.com/quicktime/download/">
    <param name="bgcolor" value="000000">
    <embed src="video1.mp4" width="384" height="304" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/" bgcolor="000000"></embed>
    </object>
    </body>
    </html>

    This should start autoplaying the movie with visible controllers on a black background. You don't really need to specify a background color both in the body bgcolor-tag and the parameter. But I see that this is what I have in my page so I'm sending it on as it is in case some edit I do now without checking breaks anything. If people cannot see the movie, this embed code should offer them a link to where the codec can be found. Don't know if that works in reality. For other video formats, you would need different code with a different object classid and codebase.

    There are more QuickTime embed-parameters here if you need them:
    http://www.apple.com/quicktime/tutorials/embed.html

    Voila!

    This all looks kind of time consuming, but once you have done it all, making a copy of the html-document with slight changes to suit your next movie, isn't very troublesome really. And by using a popup page instead of just popping up a video file in itself, you can make the window bigger (in the page template javascript) and add information text or whatever next to it.

  17. Stakota
    Member
    Posted 8 years ago #

    Lynk,
    Your code worked perfectly on my site using mpeg-4. Is there a way to do it using a quicktime movie(mov.)? I tried the same code, changing the file extensions, but that didn't work. Any help would be greatly appreciated. Thanks.

  18. Stakota
    Member
    Posted 8 years ago #

    Disregard that last question. Just after I posted it, I figured out what I had done wrong. Thanks to everyone who posted in this thread. Helped me figure out a lot.

  19. ladydelaluna
    Member
    Posted 8 years ago #

    just a note: lynk's post helped me tremendously... i'm not worried about validating one silly page if it means being able to get the video to work...

    anyway, i wanted to mark this as such because it really does work, and like many of you, i've searched the forums and support docs high and low, i've installed and removed plugins, and this (as in lynk's post) is the only way that worked and worked perfectly!

  20. malikjunaid
    Member
    Posted 8 years ago #

    i am using download accelerator plus in my system whenever i open my page http://www.xerosector.com/new2.php it directs me to download the movie i want to restrict this option can you tell me hw can i resrict the download

  21. erika_conn
    Member
    Posted 7 years ago #

    I have several "photo essays" using Windows Photo Show and saved as .wmv, so it's not a video in the real sense. I'd like to embed those "videos" in my blogs. Also, I've uploaded them to Photobucket, who changed the file name to .flv.
    How do I do that?

Topic Closed

This topic has been closed to new replies.

About this Topic