I have lots of mp3s on my site that I want my friends to be able to play only- but I don't want them all downloading as soon as the page opens and would prefer them to only start downloading into the buffer if someone wants to play it- is this possible with the embed tag? I can't seem to find anything on Google so I am wondering if it's something I'll have to do in JavaScript or think of an HTML work around.
cheers
You can use javascript to construct the embeds and insert them into the DOM when a user clicks a button or something similar.
You will want to use the Object tag vs. the Embed tag for one, but that said, don't set the auto-play option and they won't load until requested.
If you want a really simple fix - don't embed the music files just have links to them. Then a user won't have the file download until they click on them (this is what blog.stackoverflow.com does for the podcasts...).
If you have time on your hands you can go for my solution... I created a separate html page for each song and used the embed tag on each. Then I just created links to the pages to open in a new window. I know... hack! But it works well, and the other related links go along with it in the new window for each song.
You could always try out Yahoo Media Player,
You just make link to the mp3s and they can play them at their own pace.
I have seen this used for PodCasts, and Playlists of Mp3s its very handy and free.
http://mediaplayer.yahoo.com/
First link
Second link
Third link
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Simple :)
You can even add album art and manipulate the order the mp3s are added to the playlist thru simple html.
http://yahoomediaplayer.wikia.com/wiki/How_to_link
Related
I may be asking this incorrectly. I'm not super familiar with the terminology of javascript or ajax. I've been able to get by just enough using html and javascript code from highslidejs to create most of our companies in-house web pages. Now I am stuck on how to go about this issue. Originally I built this page using simply html code. Then one of the higher ups requested that I use this template. :( So I am attempting to work with this template that has no functionality what so ever. Everything was going ok until I came to having to reveal the video content below each selection using the ajax code that I grabbed from hsjs. While I got it to show the videos onclick with each submenu item.. the problem is that the way the template is built it has each video positioned just under it's name when it is clicked. And it doesn't clear the previous video being played. I was thinking that I could have each video be targeted to play in a specific div with an iframe. That way each video will play in that same div and override the previous one selected thereby avoiding having several open at the same time. I have had that work before. However, I am running into a conflict with the href having two functions: "javascript:;" and "mymoviesource.mp4"
I apologize for the lengthy explanation of my problem. Here is my work in progress: http://www.foxsportsgraphics.com/Lab-presentation/index-6-7a.html
I'm currently only working with the first "Virtual Reality" menu tab. I had each movie opening in a separate web window but they would like for each to open as the first one does for "Big East Basketball (jeep)" in that same position. Here is my first web page that I used a target iframe to play each video in:
http://www.foxsportsgraphics.com/template/index-Lab-original.html It works great having each video play in the same spot. But I don't know how to have one href do both: javascript code to reveal the iframe below the selections and target the video URL's to play in the iframe . Would it be better to use an "onclick" behavior to reveal the iframe? And if so.. how would i get the positions of the iframe to be in the same place for each selection? Again, I apologize if this question is troublesome because of my lack of knowledge in this area. But I would so greatly appreciate any help at all to direct me in some way to be able to accomplish what I want to do. Thank you in advance!
I want to add a button on the embedded youtube video on my website. So that a user can easily download that video. Now I just need to display a button on youtube video surface ,so that a user can click the button and do some job (about the video). Button will be like this:
Click Here to see
with simple html or javascript. Thank You.
Adding a button on top of your iframe is the simple part of the solution, and you will likely find this solution helpful. to match the styling, I'd recommend a site like http://css3buttongenerator.com/
As for the second part of this question, it is more advanced to write javascript to download a video, and if you'd like to avoid that, a simpler solution would be to redirect a user to a site like this. you could even go through the steps of downloading the video, and get the final link the site provides when it is ready to download.
I was creating a website for my YouTube channel since I make music for YouTube and etc.
I was wondering how can I add a mp3 player for my website without it stopping on every page reload.
I want the mp3 player to constantly playing no matter how many pages it goes on.
One way I only think this will work is having it on another server side. But the thing is that 1 person isn't going to want to listen to the same music on the website.
I'm able to just broadcast the song on one page but I want users to listen to my music and browse other pages as well.
Can someone please show me how to do this? Thanks :)
There's two ways you can do that:
The correct way would be for you to set up all your site content as AJAX calls, so your MP3 player would be at the top and untouched. It requires programming knowledge and some planning to make all the AJAX calls correctly.
The easy way, although i don't recommend because it's not W3C valid, is to put a frame at the top with your mp3 player, so it won't postback with the rest of the page when you navegate.
load your content into a div/iframe and have the mp3 playing on the main page.
You'd be best off to go with a div loaded content, iframes are going out the way of the dinosaur.
<----- Main Page -----> Music Player here
>----- ContentDiv -----< Load content into the div
<----- Main Page -----> Or Music Player here
or with an html mockup, Content being what you load your pages into, Music Player being on the main page and never being reloaded.
<head></head>
<body id="mainpage">
<div id="musicplayer"></div>
<div id="content">
</div>
</body>
The answer the Mike has suggested would be a very SEO unfriendly method, if thats a concern, but the only way I can think of to have the music completely unbroken. If you don't mind the break in music between page loads, then you would need to capture the current play length of the track and then pass that in either a cookie or as a parameter in the url which would require you to montior the user behavior and have a js function bound to all naviagtion links monitoring that.
I have a popup layer on my website that show the latest news on it. Now I want to embed a YouTube video on it, that plays once the user open the website. And I would like it to stop playing after the user close the popup page. I have tried SoundCloud player and it stops when I close it.
Here is the live link.
You can also download the file source file on here (.zip):
Source Files
So I want to make the video stops playing when the user closes the popup page.
Any idea?
Thanks in advance.
Friend's
Don't try to close the facebox/fancybox pop up window. Try to create a container that holds the video file/embed code. After clicking on Close link, just remove the HTML of that embed/video file container.
Ex. <div id="myVideoFilePlay">Video File/Embed Data</div>
Script File:
document.getElementById('remodeVideoPlayer').innerHTML ="";
After that close the fancy box
Here is some information about the auto-play feature for embedding in YouTube.
http://support.google.com/youtube/bin/answer.py?hl=en&answer=1181821
"To make it autoplay, just put &autoplay=1 after the video ID so it looks like this:"
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/XXXXXXX&autoplay=1"></param>
<embed src="http://www.youtube.com/v/XXXXXXX&autoplay=1" type="application/x-shockwave-flash" width="425" height="350">
</embed></object>
As for stopping the video, I advise you have a look here and set up some simple functions to do the pausing upon clicking "X". See: How to pause a YouTube player when hiding the iframe?
EDIT: Added more info..
I can see you set your jQuery to #dialogjj upon the site loading, and then the HTML is inside of the div so setting it to display:none; it wont stop it playing. I have an idea to make it work - there may be a better one out there with nicer jQuery but this works fine. I feel that no one is going to reply further due to the way the question was asked/not very easy to look into unfortunately. That is perhaps why you got a downvote on this question, have a look how other people ask questions here for future guide, its generally not just giving links to your website expecting people to look, instead try to pin point your problem adn what you have tried so other people can have a clue about it, but we all start somewhere so dont worry :).
My idea is that you actually set the contents FOR #dialogjj with jQuery (so the embed code is put in via the JS file and not the HTML page) and in that same way you can actually append it to get rid of that embed code. I have set up a simple JSfiddle that does this in the same fashion as you want. Its up to you to merge it into your code though :)
JS FIddle link http://jsfiddle.net/ivandude/vLrvA/2/
If you like the solution please click tick as the answer :D my first one maybe.. haha
The answer was really easy. When I used the old object embed code, it just worked. Thanks for the suggested solution but it works for iframe. But does not need any additional code.
I have a page with a series of links to YouTube videos that display in a lightbox when clicked. I'm using prettyPhoto.
On the lightbox are share links - Facebook, Twitter, and such. Unfortunately the default behaviour of these share links is to share the whole page - I want to share the URL of the YouTube video specifically.
The HTML output is customisable, as a variable in the prettyPhoto JS, so I think what I need to do is take the URL you've just clicked on (which obviously PP knows, because it can play the video) and stick it in the share link.
I'm not great at JS, so hopefully this is a relatively simple thing! I'm even hoping PP has a variable somewhere in the code already that stores this info, and I can somehow just add it into the HTML variable... but don't know how!
Thanks :)