Adding streaming video to a post

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…

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

<div align=center>
<embed SRC=https://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 https://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

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

I did try to embed the video as follows:

<embed type=”application/x-mplayer2″ pluginspage=”https://www.microsoft.com/Windows/MediaPlayer/&#8221; src=”https://mysite.com/vidoe.wmv&#8221; 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.

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=https://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=https://www.apple.com/quicktime/ scale=TOFIT></embed>
Click PLAY to see the film.
</div>

https://www.pohildre.com/video/

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.

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.

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

center via css.

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.

https://weblog.theentirety.com/2005/07/13/flvplayer/

or

https://www.youtube.com/

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.

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

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.

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.

Ok… I figured it out.

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="https://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=" https://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 https://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="https://www.apple.com/qtactivex/qtplugin.cab" width="384" height="304">
<param name="autoplay" value="true">
<param name="controller" value="true">
<param name="pluginspage" value="https://www.apple.com/quicktime/download/">
<param name="bgcolor" value="000000">
<embed src="video1.mp4" width="384" height="304" autoplay="true" controller="true" pluginspage="https://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:
https://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.