 Embed A Video But Stop It Playing Before Its End, Possible? Can I add extra code to the code! |
Welcome Guest ( Log In | Click here to Register a free account now! )
Register a free account to unlock additional features at BleepingComputer.com
Welcome to Bleeping Computer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.  |
 Apr 21 2008, 09:03 PM
Post
#1
|
|
|
Senior Member  Group: Members Posts: 511 Joined: 9-November 07 From: England Member No.: 168,496  |
For the last few months or so, I have been trying to learn few HTML codes for making simple web pages (which are humbly located on my hard drive). I want to embed a video from YouTube. Copy & paste the code, easy. But is there a way I can end the video before its actual end point... I was just wondering if it is possible to add some extra codes to tell the browser where to stop the video. I know this is probably advanced and you might be wondering why this beginner is starting from the wrong end! It's just that I want to see if this is something that can be done, so that I could make use of it when I need... If anyone has any idea please let me know. P.S. Alternative suggestions like downloading and editing the video is not an option! Two reasons why: 1) You will have to train me how to edit a video, which will probably take some time and 2) Copyright issues (in case I use the video in future)... Time behind bars could well be spent learning few more HTML codes! Thanks |
 |
 
|
|
Apr 22 2008, 05:51 AM
Post
#2
|
|
 Hail Groovicus! Group: Site Admin Posts: 5,849 Joined: 5-June 04 From: Vermillion, SD Member No.: 689 |
It could maybe be done using a Javascript timer, but I don't think it would work very well. The only way I can think of to get the timer to kick on would be to have it recognize when the video was clicked on. It wouldn't be able to recognize what was clicked on though since the video uses an embedded player. There may be a way of interacting with the video player API, but that is far beyond html.
-------------------- |
|
|
|
|
Apr 22 2008, 07:13 AM
Post
#3
|
|
|
Senior Member Group: Members Posts: 511 Joined: 9-November 07 From: England Member No.: 168,496 |
Thanks groovicus for the response.
I suspected this would a difficult job. I have no idea what API is and how it works... but the javascript timer is interesting- I haven't started learning javascript yet. Maybe I'll check it out when I start my tutorials. Anyway, the whole point was just for the sake of convenience, i.e. stopping the video at the appropriate place because of its length or relevance... and going to extreme lengths to do it might not be an option, well at least for now... where the only visitor of my 'site' is myself! |
|
|
|
|
Apr 22 2008, 09:53 AM
Post
#4
|
|
 Member  Group: Banned Posts: 90 Joined: 22-April 08 From: Doncaster, UK Member No.: 204,605 |
have you got flash? do you use firefox? there is a plug-in for firefox that lets you download youtube videos, then you can edit the movie, cut off the end and host it yourself, with flash you can add stop, start, pause, rewind, fastforward, search and volume controls
--------------------  |
|
|
|
|
Apr 22 2008, 10:30 AM
Post
#5
|
|
|
Senior Member Group: Members Posts: 511 Joined: 9-November 07 From: England Member No.: 168,496 |
Post #1:
QUOTE P.S. Alternative suggestions like downloading and editing the video is not an option! Two reasons why: 1) You will have to train me how to edit a video, which will probably take some time and 2) Copyright issues (in case I use the video in future)... Time behind bars could well be spent learning few more HTML codes! But thanks for the input. |
|
|
|
|
Apr 22 2008, 10:32 AM
Post
#6
|
|
|
Member Group: Banned Posts: 90 Joined: 22-April 08 From: Doncaster, UK Member No.: 204,605 |
ooops, didn't read it all, sorry
-------------------- |
|
|
|
|
Apr 22 2008, 03:39 PM
Post
#7
|
|
|
Hail Groovicus! Group: Site Admin Posts: 5,849 Joined: 5-June 04 From: Vermillion, SD Member No.: 689 |
I just found an API programmer's reference for YouTube videos. The ability exists to fire events at certain times in the video, so it should not be too hard to stop the video at a prescribed time. I'll dig into it and see what I can find.
EDIT: I think I can do it. I can't do it on this machine though, but I will see what I can do when I get home tonight. I don't think it will be that hard. All you should need to do is add some cut and paste code to your HTML. (I think) -------------------- |
|
|
|
|
Apr 22 2008, 05:05 PM
Post
#8
|
|
|
Senior Member Group: Members Posts: 511 Joined: 9-November 07 From: England Member No.: 168,496 |
Great! Interesting stuff... Looking forward to the code.
|
|
|
|
|
Apr 23 2008, 07:51 AM
Post
#9
|
|
|
Hail Groovicus! Group: Site Admin Posts: 5,849 Joined: 5-June 04 From: Vermillion, SD Member No.: 689 |
It's sort of interesting. This page:
http://code.google.com/apis/youtube/js_example_1.html has all the code and functionality needed to hook into player. When I copy the source code onto my system and try to run it locally, it doesn't work, which is a bit strange. I do not have time to figure out why not at the moment, but now I want to know why it doesn't work. -------------------- |
|
|
|
|
Apr 23 2008, 09:33 AM
Post
#10
|
|
|
Senior Member Group: Members Posts: 511 Joined: 9-November 07 From: England Member No.: 168,496 |
By copying the source code and running locally, I believe you mean copying and pasting into a HTML editor and saving as a html, then trying to display the page locally, am I right?
I don't know if that's what you mean... but I have tried that. If I copy the whole code including the reference (link) to the video and paste it on a html editor, and then save it as a html document, it works. But when I changed the reference to the video link to the video I wanted to display, it didn't work. This post has been edited by Juha: Apr 23 2008, 09:37 AM |
|
|
|
|
Apr 23 2008, 09:37 AM
Post
#11
|
|
|
Hail Groovicus! Group: Site Admin Posts: 5,849 Joined: 5-June 04 From: Vermillion, SD Member No.: 689 |
Yes, I meant by making a local html page. The video will run if I use the controllers embedded in the video player, but if I try to use the other links at the bottom, I get an error. You are likely getting an error from your link because you are removing too much of the link that is already there. I have pasted in severla different links, and they all work just fine (as long as I use the embedded controls in the player).
I'll get to tinker with it later and see if I can figure out what is going on. EDIT: Doh! It helps to RTFM! QUOTE To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet. That explains things. I can set up a web project on my development system. -------------------- |
|
|
|
|
Apr 23 2008, 07:54 PM
Post
#12
|
|
|
Hail Groovicus! Group: Site Admin Posts: 5,849 Joined: 5-June 04 From: Vermillion, SD Member No.: 689 |
Pardon the double post, but I wanted to make sure that the code here got into it's own post, just to save confusion. As I said right above, had I read all of the documents, I would have seen that the reason my copy and paste didn't work was because I didn't have the code running on a server. The flash player used by YouTube has built-in security features to prevent the player being used in a malicious fashion (nice). Anyway, after I got the code on my server, I was able to modify it and move stuff around so that the player stopped playing whenever it was told to stop playing. The solution isn't entirely satisfactory though, because once the video is stopped, it can't be restarted from the beginning without reloading the player and the video. My quick and dirty solution was to reload the page. In real life, one would only want to reload the div containing the player to save on reload times and server load.
Anyway, here is the HTML code, which was modified from the link I gave above at http://code.google.com/apis/youtube/js_example_1.html CODE <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>YouTube Pause_Video Example</title> <script src="http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js" type="text/javascript"></script> <script src="custom.js" type="text/javascript"></script> </head> <body id="page"> <!--Start of player code --> <div> <div id="ytapiplayer"> You need Flash player 8+ and JavaScript enabled to view this video. </div> <script type="text/javascript"> // allowScriptAccess must be set to allow the Javascript from one domain to access the swf on the youtube domain var params = { allowScriptAccess: "always" }; // this sets the id of the object or embed tag to 'myytplayer'. You then use this id to access the swf and make calls to the player's API var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/v/vuz0CLjYKw8&hl&border=0&enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "425", "356", "8", null, null, params, atts); </script> </div> <!--End of player code--> </body> </html> Depending on which video you want to embed, all you need to do is change the part that says CODE "http://www.youtube.com/v/vuz0CLjYKw8&hl" YouTube will give you the embed link, of which you only need the http path.The next part of the operation is a javascript page. I moved all of those to a separate page just to make the HTML more clean. CODE //custom.js function updateHTML(elmId, value) { document.getElementById(elmId).innerHTML = value; } function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById("myytplayer"); setInterval(updateytplayerInfo, 250); updateytplayerInfo(); ytplayer.addEventListener("onStateChange", "onytplayerStateChange"); ytplayer.addEventListener("onError", "onPlayerError"); } function onytplayerStateChange(newState) { setytplayerState(newState); } function onPlayerError(errorCode) { alert("An error occurred: "+ errorCode); } function updateytplayerInfo() { var time = ytplayer.getCurrentTime(); //change the value of stopTime. Currently it is set to 5 seconds var stopTime=5; if(time>stopTime){ if(ytplayer){ ytplayer.pauseVideo(); time =0; document.location.reload(); } } } The only real magic taking place there is in the last function called updateplayerInfo. The variable stopTime simply needs to be set to the time when you want the video to stop. The HTML code that calls this javascript page expects it to be in the same directory as the HTML page is located. If you decide to put the javascript in a different location, you will need to change the path name. I think it is worth repeating; this will not work unless the code is running from a server. -------------------- |
|
|
|
|
Apr 24 2008, 08:22 PM
Post
#13
|
|
|
Senior Member Group: Members Posts: 511 Joined: 9-November 07 From: England Member No.: 168,496 |
I copied and pasted the codes. I saved the HTML and Javascript, each code separately... in the same folder. I know you said I need to run it from a server but I was just checking and playing around with things to see if something might miraculously work!
Anyway, the video... i.e. the one included with your clean code works... it plays (but obviously without the 'stop' etc, buttons below). But when I changed the video to the one I wanted to play, it wouldn't work... i.e. video did not display at all! When I changed the "http://www.youtube.com/v/vuz0CLjYKw8&hl" part to for example this video link (which works): "http://www.youtube.com/watch?v=WjRpTNWv7dY", the video did not show at all. I thought maybe the "http://www.youtube.com/v/vuz0CLjYKw8&hl" might not be the whole link to the actual video so, I checked by pasting it into the browser and hitting 'enter'. But the video displayed. For some reason, I included the '&' at the end of the link to see what happens (and/or if it is part of the link), i.e. replaced that part as well... and it did not make a difference. The video still played. I don't even know what that '&' stands for, but I included it in the link, "http://www.youtube.com/v/vuz0CLjYKw8&hl&", and I kept on removing one character at the end of the link and pressing enter in the browser address after each, and the link still displayed until I removed the number '8'. Now I'm just confused what is the actual link since it didn't matter exactly what you entered. Even the whole "http://www.youtube.com/v/vuz0CLjYKw8&h...rapiid=ytplayer' displays the video when typed into the browser. Also, I'm not sure why when the video link is typed directly into the browser, only the video appears, i.e. the video in the middle of the screen with nothing else... no related videos or other texts... I hope I haven't confused you! This post has been edited by Juha: Apr 24 2008, 08:32 PM |
|
|
|
|
Apr 24 2008, 08:50 PM
Post
#14
|
|
|
Hail Groovicus! Group: Site Admin Posts: 5,849 Joined: 5-June 04 From: Vermillion, SD Member No.: 689 |
Look at the difference in the links.
"http://www.youtube.com/v/vuz0CLjYKw8&hl" "http://www.youtube.com/watch?v=WjRpTNWv7dY" The link that you pasted in is not the correct url. Your link has the '/watch?' which is a flash call (I think). If you want the correct link, you need to pull it from the code that they include in the little box on the right side. The total linl will look like: CODE <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/yYjCSpHDdmg&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/yYjCSpHDdmg&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object> The link you are putting in is (I think) the alternative link that would appear as text, and that comes from the source.Edit: Try this link instead: http://www.youtube.com/v/WjRpTNWv7dY -------------------- |
|
|
|
|
Apr 25 2008, 09:00 AM
Post
#15
|
|
|
Senior Member Group: Members Posts: 511 Joined: 9-November 07 From: England Member No.: 168,496 |
Thanks for that.
But I am just wondering why the different urls? Why is the one embedded in the code different from one in the browser address? Maybe I just need to understand how urls work! This post has been edited by Juha: Apr 25 2008, 09:07 AM |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
| Lo-Fi Version | Time is now: 7th September 2008 - 06:38 PM |
© 2003-2008 All Rights Reserved Bleeping Computer LLC.