How to embed live-streaming video on a podcast website – TAP045

Play

Livestream ProducerOnce you have your podcasting gear setup, it’s time to pick your live-streaming service and embed it on your website!

Make sure that you’ve listened to previous episodes in our live-streaming series.

Pick a live-streaming service

The follow is a list of the most-popular and some not-so-popular services for live-streaming video and audio.

If you have trouble with any of these in OS X Lion, then you have to add an “Allow” rule to Flash Player. Even after that, I still couldn’t get some of them to work, so your results may vary.

Video

  1. Ustream.tv—The most popular, no customization controls for embed, optional chat room
  2. Justin.tv—Unobtrusive ads, low-quality sound
  3. Livestream.com—iframe embed for future mobile-friendliness
  4. Stickam.com—Customization controls for embed
  5. TinyChat.tv—very little customization, forces using their chat room
  6. Blogtv.com
  7. Vokle.com
  8. Bambuser.com—streaming to Facebook, too
  9. freedocast.com
Audio
  1. Mixlr
  2. BlogTalkRadio—must schedule your shows, low-quality audio for free

What do you think of these services? Have you used them as a live-streamer or as an attendee? Please share your reviews, or suggestions of other services to consider.

Embed the player on your site

I highly recommend that you have your own live page on your own website. Follow these instructions to make that with WordPress and embed your own player.

  1. Login to your WordPress admin with yourpodcast.com/wp-admin/
    WordPress Login
  2. Go to Pages > Add New.
    WordPress: Add new page
  3. Name it “Live.”
  4. Switch to the HTML tab.
    WordPress: HTML tab
  5. Copy your embed code from the live-streaming site.
    Ustream.tv: embed codes
  6. Paste into the HTML tab.
  7. Save, preview, and publish!
    WordPress: publish

“Hack” the embed code

Here’s some sample code from Ustream (with some things omitted). Change the bold stuff to adjust the size or auto-play behavior of your player.

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”480″ height=”296″><param name=”flashvars” value=”autoplay=false&amp;brand=embed&amp;v3=1″/><param name=”allowfullscreen” value=”true”/><param name=”allowscriptaccess” value=”always”/><param name=”movie” value=”http://www.ustream.tv/flash/viewer.swf”/><embed flashvars=”autoplay=false&amp;brand=embed&amp;v3=1″ width=”480″ height=”296″ allowfullscreen=”true” allowscriptaccess=”always” src=”http://www.ustream.tv/flash/viewer.swf” type=”application/x-shockwave-flash” /></object><br /><a href=”http://www.ustream.tv/” style=”padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;” target=”_blank”>Streaming by Ustream</a>

Most embed codes will include some link-back text at the end. You can remove this, as illustrated above.

I can help you launch or improve your podcast

I'm available for one-on-one consulting to help you launch or improve your podcast.

Ask your questions or share your feedback

Please connect with me

Find more podcasts about technology on the Tech Podcasts Network.

Check out more Noodle.mx Network shows

Disclosure

This post may contain links to products or services with which I have an affiliate relationship. I may receive comissions or bonuses from your actions on such links

StudioPress Premium WordPress Themes
  • Pingback: 9 Must-Haves for a Live-Streaming Page()

  • Debbie

    I can't even remember how I stumbled on this site, but you're amazing! :)

    Currently, I host a podcast (although I don't call it that) on BlogTalkRadio (BTR). I use an Audio Technica 2020 usb mic with pop filter via Skype, and my listeners and I are relatively happy with the sound quality.

    I'm ready to set up my own hosted podcast, though, but don't want to lose the ease of bringing live callers on the line. (The BTR studio makes this super-easy). Currently, I use Replay Telecorder to record all of the audio and my local webcam as I broadcast the show. (of course, BTR automatically records the audio, too).

    I love the energy of broadcasting live, and will likely begin to (finally) use my Livestream account to stream video live simultaneously. Like you, I realized that the live scheduling has forced me to do the show on a regular schedule…my listeners expect it.

    Thanks for all that you do.

    Debbie

    • http://noodle.mx Daniel J. Lewis

      "They found me! I don't know how, but they found me! RUN FOR IT, MARTY!" :)

      Thanks, Debbie! I'm sure you'll find that you'll have a lot more listeners when you turn your live broadcast into a podcast and let people download anytime and listen anywhere.

  • http://twitter.com/FlyingDan Danny Vacar

    Hi Daniel,

    What do you think of SHOUTcast as a streaming service? Have you ever used it? It seems a bit more complicated to set up than Mixlr but it may be one of those things where once it’s set up you don’t have to worry about it again.

    • http://theRamenNoodle.com/ Daniel J. Lewis

      Yes, SHOUTcast looks more complicated. I haven’t tried it yet. In live-streaming my podcasts, I’m more interested in combining the video, to make it an enhanced experience instead of just listening—but live.

      I’ll try to take a closer look at SHOUTcast soon.

  • Jide

     i have just being giving a file with two embedded codes. One for high stream and another for low stream. i want to embed the two codes but when website visitors click on one the streaming video they make use of the high streaming. When mobile users visit the site, it uses the codes for low stream, how do i do this

    • http://About.me/DanielJLewis Daniel J. Lewis

      Nice application! This would require some web development. But here’s an example using responsive web design.

      In your HTML post code:


      HIGH VIDEO EMBED

      LOW VIDEO EMBED

      In your CSS file:


      #low-video { display: none; }

      @media screen and (max-width: 640px) {
      #high-video { display: none; }
      #low-video { display: block; }
      }

      This tells modern web browsers that if the browser window is smaller than 640 pixels wide, to hide the high-quality video and display the low-quality one instead.

      But this may not work perfectly on your theme.

  • http://www.facebook.com/elcaminoacasa Quinto Elemento

    Is there any way or widget that let me schedue (day, hurs, minutes) several videos, from different sources? I have a “channel” on my web and I want to broadcast videos from friends, who has accounts in diferent servers, when my own programs aren´t broadcasting. Thanks for your answer!

    • http://About.me/DanielJLewis Daniel J. Lewis

      This is beyond my field of expertise. But I think you could do this by getting downloaded versions of all the videos, make a local playlist, and then live-stream that playlist.