Best method for embedding video & audio files into a website?
December 8, 2011 3:14 PM Subscribe
Please tell me the best current method for embedding/displaying audio and video files into a website using simple HTML &/or CSS.
I would like to embed audio and video files into a new website I am making. I would like them to show up with easy-to-navigate controls and I do not want the user to have to wait for the file to load to begin viewing or listening to it.
I would also like this to be as cross-browser compatible and as accessible as possible. Something that works for Firefox & Chrome but not IE is really not workable.
The files I am working with are MP3s for the audio and either M4V or MOV for the video. I can convert or compress these if necessary (& certainly would appreciate advice about this as well).
Thank you!
I would like to embed audio and video files into a new website I am making. I would like them to show up with easy-to-navigate controls and I do not want the user to have to wait for the file to load to begin viewing or listening to it.
I would also like this to be as cross-browser compatible and as accessible as possible. Something that works for Firefox & Chrome but not IE is really not workable.
The files I am working with are MP3s for the audio and either M4V or MOV for the video. I can convert or compress these if necessary (& certainly would appreciate advice about this as well).
Thank you!
You won't be able to do this with just html/css.
Best you can do is put the stuff up on youtube and embed it in your website with the code youtube gives you.
A step up from that is the JW Player.
Note that if you host these files on your server or on a shared hosting plan, the media streaming will skyrocket the amount of bandwidth your site uses. You could skip right past whatever limitations you have (because even "unlimited bandwidth" is limited) and star incurring surplus charges or find yourself shut off.
posted by royalsong at 3:25 PM on December 8, 2011
Best you can do is put the stuff up on youtube and embed it in your website with the code youtube gives you.
A step up from that is the JW Player.
Note that if you host these files on your server or on a shared hosting plan, the media streaming will skyrocket the amount of bandwidth your site uses. You could skip right past whatever limitations you have (because even "unlimited bandwidth" is limited) and star incurring surplus charges or find yourself shut off.
posted by royalsong at 3:25 PM on December 8, 2011
My first and main question would be: what doesn't work for you about existing ways of doing this such as uploading the file to YouTube or Vimeo and then embedding the video that way? Usually this is the industry standard way to do this and has the nice side effect of working with mobile devices, I believe. Also no bandwidth costs for you.
I do not want the user to have to wait for the file to load to begin viewing or listening to it.
I think what you mean here is that you'd like to stream the file and not have the user have to download the entire file in order to start listening to it? Here are twenty example music players. The downside is that usually the ones that are the sleekest are the ones that may not be as backwards compatible. I know that we've done some work here to make sure that the embedded player we have here is pretty compatible. I think all of these will work with any "modern" browser but you're going to have to think about whether something that breaks in IE6 (ten years old) or IE7 (five years old) should be your problem or someone else's.
For my part, personally, I use Vimeo for videos that I care about clarity (or am using copyrighted music that the YouTube machine would eat) and embed them using the code they give which degrades decently. If the music is your own music, you could make it into one of those "no video" videos using iMovie (I could talk you through this over email) which is copacetic on YouTube and I don't see people doing it as much over at Vimeo. My favorite tool for this for audio, however, is SoundCloud. Very simple easy to use widgets that you can embed in a page and should be fairly backwards compatible though I haven't used it.
Again, there will be dramatically different responses depending on whether you're looking to upload your own content or someone else's and if it's someone else's how cagey you have to be about copyright.
posted by jessamyn at 3:30 PM on December 8, 2011
I do not want the user to have to wait for the file to load to begin viewing or listening to it.
I think what you mean here is that you'd like to stream the file and not have the user have to download the entire file in order to start listening to it? Here are twenty example music players. The downside is that usually the ones that are the sleekest are the ones that may not be as backwards compatible. I know that we've done some work here to make sure that the embedded player we have here is pretty compatible. I think all of these will work with any "modern" browser but you're going to have to think about whether something that breaks in IE6 (ten years old) or IE7 (five years old) should be your problem or someone else's.
For my part, personally, I use Vimeo for videos that I care about clarity (or am using copyrighted music that the YouTube machine would eat) and embed them using the code they give which degrades decently. If the music is your own music, you could make it into one of those "no video" videos using iMovie (I could talk you through this over email) which is copacetic on YouTube and I don't see people doing it as much over at Vimeo. My favorite tool for this for audio, however, is SoundCloud. Very simple easy to use widgets that you can embed in a page and should be fairly backwards compatible though I haven't used it.
Again, there will be dramatically different responses depending on whether you're looking to upload your own content or someone else's and if it's someone else's how cagey you have to be about copyright.
posted by jessamyn at 3:30 PM on December 8, 2011
Response by poster: the audio files as well?
all the files currently reside on a wordpress.com site... can i stream it from there?
thanks for your answers!
posted by jammy at 3:32 PM on December 8, 2011
all the files currently reside on a wordpress.com site... can i stream it from there?
thanks for your answers!
posted by jammy at 3:32 PM on December 8, 2011
Response by poster: oh & just saw jessamyn's response...
mainly because it is for an artist who doesn't have a youtube site and may be a bit concerned about folks stealing their stuff. i know bandwidth is an issue but i was wondering if there was some trick i didn't know where i could have it all contained in the site itself.
so, given that you & other metafiltarians have already begun a chorus of youtube/vimeo i will suggest it to them. and soundcloud too (which i am passingly familiar with). i know there's some way to make a youtube "private" so i'll look into that.
further recommendations / advice still welcome!
posted by jammy at 3:39 PM on December 8, 2011
mainly because it is for an artist who doesn't have a youtube site and may be a bit concerned about folks stealing their stuff. i know bandwidth is an issue but i was wondering if there was some trick i didn't know where i could have it all contained in the site itself.
so, given that you & other metafiltarians have already begun a chorus of youtube/vimeo i will suggest it to them. and soundcloud too (which i am passingly familiar with). i know there's some way to make a youtube "private" so i'll look into that.
further recommendations / advice still welcome!
posted by jammy at 3:39 PM on December 8, 2011
I believe you would be best off with jPlayer. Very straightforward.
Gory details of which browsers cause pain with the html5 elements: <audio>, <video> from caniuse.com. And even more detail about video from BrightCove and even more discussion.
[on preview]
The fact that your files are on a wordpress.com may impose other limitations for embedding video and audio files. Are you showing on and hosting on wordpress.com, or are you mixing wordpress.com media with another website?
posted by artlung at 3:39 PM on December 8, 2011
Gory details of which browsers cause pain with the html5 elements: <audio>, <video> from caniuse.com. And even more detail about video from BrightCove and even more discussion.
[on preview]
The fact that your files are on a wordpress.com may impose other limitations for embedding video and audio files. Are you showing on and hosting on wordpress.com, or are you mixing wordpress.com media with another website?
posted by artlung at 3:39 PM on December 8, 2011
Response by poster: mixing wordpress.com media with another website
this - thanks!
i'm happy to move them somewhere else (e.g. youtube/vimeo/soundcloud). just trying to work with what i've got at present.
posted by jammy at 3:42 PM on December 8, 2011
this - thanks!
i'm happy to move them somewhere else (e.g. youtube/vimeo/soundcloud). just trying to work with what i've got at present.
posted by jammy at 3:42 PM on December 8, 2011
Response by poster: hmm... JW Player and jPlayer both look quite tasty.
thanks for those tips artlung & royalsong!
posted by jammy at 3:47 PM on December 8, 2011
thanks for those tips artlung & royalsong!
posted by jammy at 3:47 PM on December 8, 2011
So if you have mp3, mov, and m4v files, that implies you have not just a free wordpress.com account, you paid for an upgrade. True? If so it seems like based on
posted by artlung at 3:53 PM on December 8, 2011
Is there a limit on transfers, bandwidth, downloads?...applies and you can do with those media urls what you like. I can't see any fine print about VideoPress and external sites.
No.
posted by artlung at 3:53 PM on December 8, 2011
Response by poster: yes, they did just pay for an upgrade/bundle!
so, streaming goodness, yes?
posted by jammy at 4:07 PM on December 8, 2011
so, streaming goodness, yes?
posted by jammy at 4:07 PM on December 8, 2011
The usual trick for putting audio files on Youtube is to turn them into video files where the video is a still image of some kind.
posted by Chocolate Pickle at 4:09 PM on December 8, 2011
posted by Chocolate Pickle at 4:09 PM on December 8, 2011
Other than seconding most of what's been said, I'd like to recommend VideoJS. It looks similar to jPlayer and JW Player, but the website is arguably prettier looking :) It's a HTML5 player that falls back to Flash when browser-stubborn sail in on old Internet Explorers.
I'm mostly linking to it for completeness here, and because I'm thankful for how well it worked for me the other day. It works with everything - iP*ds, Android, Chrome, IE6-IE9, everything. I see that there's a WordPress plugin too.
posted by krilli at 4:29 PM on December 8, 2011 [2 favorites]
I'm mostly linking to it for completeness here, and because I'm thankful for how well it worked for me the other day. It works with everything - iP*ds, Android, Chrome, IE6-IE9, everything. I see that there's a WordPress plugin too.
posted by krilli at 4:29 PM on December 8, 2011 [2 favorites]
I think the Vimeo Plus (paid version) solution is very attractive and affordable. It'll handle HTML5 or Flash as well, and I imagine you could make it do audio somehow. Also, you can remove all branding and pick your player colors.
posted by iamscott at 6:53 PM on December 8, 2011
posted by iamscott at 6:53 PM on December 8, 2011
Just wanted to add to the post above -- the downside I've found to self-hosted media (particularly video) is that you usually only store one version. With Vimeo or YouTube they'll encode it at a few different bitrates so that it will stream fluidly on various devices and internet speeds. Also, your server is not optimized to serve video, and the CDN approach will lead to much more reliable streaming.
posted by iamscott at 6:55 PM on December 8, 2011
posted by iamscott at 6:55 PM on December 8, 2011
{mainly because it is for an artist who doesn't have a youtube site and may be a bit concerned about folks stealing their stuff.}
You can publish the video as private (so that only people with the link can go to the video and it won't be indexed by search engines) and then embed on your page.
But basically with things like Screen Burner and Camtasia, the internet is an open candy store. But there are things you can do to protect your content.
posted by it's a long way to south america at 7:58 PM on December 8, 2011
You can publish the video as private (so that only people with the link can go to the video and it won't be indexed by search engines) and then embed on your page.
But basically with things like Screen Burner and Camtasia, the internet is an open candy store. But there are things you can do to protect your content.
posted by it's a long way to south america at 7:58 PM on December 8, 2011
Wherever you end up stashing your stuff, WordPress has excellent audio and video support via plugins. Viper's Video Quick Tags works brilliantly, is XHTML compliant and degrades nicely. We have also used and liked WPAudio.
posted by DarlingBri at 8:29 AM on December 9, 2011
posted by DarlingBri at 8:29 AM on December 9, 2011
There is nothing you can do to keep someone from stealing your content online (especially audio). Yes, you might be able to use some sort of digital fingerprint to track down a source, but that isn't going to keep me from easily copying it and keeping it in my personal music collection (or bittorrenting it, or whatever).
Digital works are inherently copyable. All of them. Overcoming this is very expensive, time consuming, and usually punishes only your law-abiding customers.
But to answer the question, I use JWPlayer on most of my sites.
posted by coolguymichael at 9:51 AM on December 9, 2011
Digital works are inherently copyable. All of them. Overcoming this is very expensive, time consuming, and usually punishes only your law-abiding customers.
But to answer the question, I use JWPlayer on most of my sites.
posted by coolguymichael at 9:51 AM on December 9, 2011
Response by poster: hello everyone!
thank you for all your answers & advice. i really appreciate it.
i'm currently going with the YouTube option & it seems to be working just fine. i will definitely be checking out the various players that folks here have recommended as well.
gracias!!
posted by jammy at 5:04 PM on December 11, 2011
thank you for all your answers & advice. i really appreciate it.
i'm currently going with the YouTube option & it seems to be working just fine. i will definitely be checking out the various players that folks here have recommended as well.
gracias!!
posted by jammy at 5:04 PM on December 11, 2011
« Older Can you advise me on making a wine rack? | Why is my stupid brain trying to get in the way of... Newer »
This thread is closed to new comments.
posted by Chocolate Pickle at 3:23 PM on December 8, 2011 [1 favorite]