Posting video that can't be saved

[Del]

Yola,

I'm trying to find some help with posting video in a web page.

I have some MPEG and AVI videos that I want to post on my page so people can view them but not save them. I tried embedding them but you can still SAVE AS the vids and Im trying to stop that because it's been abused in the past. I also tried scripts to block right clicks but it stops everything except right clicking for saving the video.

Any suggestions? Theyre small videos... I was hoping to do something almost like some movie web pages do where another window pops up and plays it but doesnt let you save it.

Thanks a million in advance.

-Del

[PeOfEo]

Its not possible. If you stream the video from a stream server or something so it is not actually a file and maybe send it through a cgi bin or something, I have seen it done but do not know how exactly to do this, so it can only be opened from the site you might be able to foild some attempts. But no you can not use a video file and stop people from taking it because if it opens in media player or is embedded it is still going into a temporary file on the users machine so they can just get it from there if they want it.

[Del]

awww, okay.

Thanks for the help!

-Del

[Del]

Originally posted by PeOfEo
Its not possible. If you stream the video from a stream server or something so it is not actually a file and maybe send it through a cgi bin or something, I have seen it done but do not know how exactly to do this, so it can only be opened from the site you might be able to foild some attempts. But no you can not use a video file and stop people from taking it because if it opens in media player or is embedded it is still going into a temporary file on the users machine so they can just get it from there if they want it.

Okay now that I think of it... is there any way to make a smaller page pop up when clicked and have a particular image for a background with the small video placed in a particular location so that it looks like it's on a television set, for example?

[PeOfEo]

Yes, it would involve a lot of client side codeing though, to set the window size, the embed, the media player properties, controls for the media, and the background image. Unless you designed an html file with all of these settings and just had it open in a new window. I prefer not to use client side codeing, as little as possible. Because different browsers respond to it differently it cannot be relied apon.

[PunkSktBrdr01]

Actually, all you'd need is CSS. Just position the embedded video in a certain spot over the background image.

[Del]

Any suggestions on where to start? I have this really funny picture with a viewer screen area and I want to put some of these short videos up with one on the screen.

[PunkSktBrdr01]

Put this in the head of the movie page:


<style type="text/css">
#tvPic {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: transparent;
background-image: url(tv.jpg); // set to the name of the tv image
background-position: 0 0;
background-repeat: no-repeat;
border-width: 0;
padding: 0;
margin: 0;
z-index: 1;
}
#movie {
position: relative;
top: 0px; // set to the position of the movie from the top of the tv image
left: 0px; // set to the position of the movie from the left of the tv image
width: auto;
height: auto;
background-color: transparent;
border-width: 0;
padding: 0;
margin: 0;
z-index: 5;
}
</style>


Put this in the body of your page:


<div id="tvPic">
<div id="movie">
<!-- put code for embedded movie here -->
</div>
</div>


That should work. :)

[Del]

cool... okay, I've got the body in there and the movie does show up and I can adjust where it lands but Im having problems getting the viewerscreen (TV) image to come up. This is what I have

style type="text/css">
#tvPic {
position: absolute;
top: 50px;
left: 50px;
width: 100%;
height: 100%;
background-color: transparent;
background-image: <<img src="../Backgrounds/VIEWERSCREEN.jpg">(tv.jpg);
background-position: 0 0;
background-repeat: no-repeat;
border-width: 0;
padding: 0;
margin: 0;
z-index: 1;
}
#movie {
position: relative;
top: 60px;
left: 60px;
width: auto;
height: auto;
background-color: transparent;
border-width: 0;
padding: 0;
margin: 0;
z-index: 5;
}
</style>

Ive never really done this before so Im tweaking it... lol

[PunkSktBrdr01]

In #tvPic, change


background-image: <<img src="../Backgrounds/VIEWERSCREEN.jpg">(tv.jpg);


to


background-image: url(../Backgrounds/VIEWERSCREEN.jpg);

[PeOfEo]

But I thought you wanted the video to be in a new window that had a predetermined height and width, like a small window. That would generally not be its own file a java script window.

[Del]

if I can get it to be a seperate one, that would be great but with how bad I am at this, Anything will work right now... Ive got a few ideas for the page (and the seperate window is how some of it will have to be).

Im hoping this works...

[PunkSktBrdr01]

To open a new window to show the movie, put this in the head of the main page:


<script type="text/javascript">
function showMovie(movieName, embedId) {
// be sure to set the width and height of the window correctly
movieWindow = window.open("movieplayer.html","movieWindow","width=300, height=300, location=0, menubar=0, resizable=0, scrollbars=0, status=1, titlebar=1, toolbar=0"); // open the new window
movieWindow.document.getElementById(embedId).src = movieName; // tell it what movie to play
}
</script>


I know that the window.open(...) function works, but I'm not sure about the other part. If it doesn't work, you may have to make a new page for each movie, so hopefully it does. This is the "movieplayer.html" page:


<html>
<head>
<style type="text/css">
#tvPic {
position: absolute;
top: 50px;
left: 50px;
width: 100%;
height: 100%;
background-color: transparent;
background-image: background-image: url(../Backgrounds/VIEWERSCREEN.jpg);
background-position: 0 0;
background-repeat: no-repeat;
border-width: 0;
padding: 0;
margin: 0;
z-index: 1;
}
#movie {
position: relative;
top: 60px;
left: 60px;
width: auto;
height: auto;
background-color: transparent;
border-width: 0;
padding: 0;
margin: 0;
z-index: 5;
}
</style>
<title>Movie Player</title>
</head>
<body>
<div id="tvPic">
<div id="movie">
<!-- put code for embedded movie here. set embed id="embedMovie" -->
</div>
</div>
</body>
</html>


To use this, make a link for each movie on the main page. Then, in each link, add onClick="showMovie('movie.mpg', 'embedMovie'); return false;". Change movie.mpg to the name of the movie for each link. Hope this wasn't too confusing. :)

[Del]

lol okay here is what I have so far for the first part of it...

http://www.mibhq.com/mibseriesvids.htm

I did have a background behind it but it vanished...

[PunkSktBrdr01]

Okay, you need to remove the stylesheet from that page and put it in the "movieplayer.html" file. Put the JavaScript that I gave you in the page you linked to. Then, add a link for each movie, and in the <a ...> tag, add onClick="showMovie('movie.mpg', 'embedMovie'); return false;", where movie.mpg is the movie you are linking to. The tag should look like this:


<a href="movie.mpg" onClick="showMovie('movie.mpg', embedMovie'); return false;">Watch Movie.mpg</a>


Hope that helps! :)

[Del]

I havn't put anything for the new window yet. Ill do that right now

[Del]

Hmmm this doesn't seem to work... do I take the second set of scripting and add it to the forst or start a whole new page?

[PunkSktBrdr01]

Okay, here are the two pages.

mibseriesvids.htm:


<html>
<head>
<title>My Movies</title>
<script type="text/javascript">
function showMovie(movieName, embedId) {
// be sure to set the width and height of the window correctly
movieWindow = window.open("movieplayer.htm","movieWindow","width=300, height=300, location=0, menubar=0, resizable=0, scrollbars=0, status=1, titlebar=1, toolbar=0"); // open the new window
movieWindow.document.getElementById(embedId).src = movieName; // tell it what movie to play
}
</script>
</head>
<body>
<a href="movie1.mpg" onClick="showMovie('movie1.mpg', 'embedMovie'); return false;">Clip 1</a><br>
<a href="movie2.mpg" onClick="showMovie('movie2.mpg', 'embedMovie'); return false;">Clip 2</a><br>
<a href="movie3.mpg" onClick="showMovie('movie3.mpg', 'embedMovie'); return false;">Clip 3</a>
</body>
</html>


movieplayer.htm:


<html>
<head>
<style type="text/css">
#tvPic {
position: absolute;
top: 50px;
left: 50px;
width: 100%;
height: 100%;
background-color: transparent;
background-image: background-image: url(../Backgrounds/VIEWERSCREEN.jpg);
background-position: 0 0;
background-repeat: no-repeat;
border-width: 0;
padding: 0;
margin: 0;
z-index: 1;
}
#movie {
position: relative;
top: 60px;
left: 60px;
width: auto;
height: auto;
background-color: transparent;
border-width: 0;
padding: 0;
margin: 0;
z-index: 5;
}
</style>
<title>Movie Player</title>
</head>
<body>
<div id="tvPic">
<div id="movie">
<embed id="embedMovie" src="" width="207" height="154">
</embed>
</div>
</div>
</body>
</html>


Let me know if you have any trouble with that. Oh, you should definitely get rid of the no-right-click scripts, 'cause they're really annoying, and they aren't going to stop anyone from getting the movies. :)

[Del]

im going to have other media on the page (images and art) and it's been abused in the past (direct linking, etc.)

[PunkSktBrdr01]

Yeah, but the no-right-click script won't stop direct linking. Just put a watermark on you pictures, or put up a copyright notice. Then, if you catch anyone stealing your stuff, they can get in big trouble.

[Del]

Okay, It pops up with a new window now. Where do I put the location of each video in the coding?

[PunkSktBrdr01]

Change the text in bold to the location of the video:

<a href="movie.mpg" onClick="showMovie('movie.mpg', 'embedMovie'); return false;">Movie Title</a>

Hope it works! :)

[Del]

I got that all in and it works save for the animation being played by Windows Media Player instead of in the pop up...

is it just a matter of WMP settings?

[DaveSW]

embedding the movie in a flash file would stop most people getting it.

[PunkSktBrdr01]

Try using this for the link instead:

<a href="#" onClick="showMovie('movie.mpg', 'embedMovie'); return false;">Movie Title</a>

[Del]

it's not the elite web users I worry about because yeah, they can pretty much get anything from my page (but an upside is they ask for permission). It's just the little kids and those with free web space and the random whim to make a page that are my biggest problem.

Last year, 3 seperate people made web pages entirely composed of the stuff on mine, and most of it was direct linked. Nothing drives me nuts more than some kid who stole the artwork that was given to me by the people who made the television show Im adding these clips for.

[Del]

Okay we're getting there...

http://www.mibhq.com/mibseriesvids.htm

the "Kero", "Dog Duty" and "Rap" are the earlier versions and I just tried the new version with the "Bruce Wayne vs Kay"