34 {{ upvoteCount | shortNum }}
34 {{ upvoteCount | shortNum }}

Embedding Video Into Web Page

by Andyf
28 replies
I thought this one was real easy...and actually it is...I'm just not getting it yet.

I've used Camtasia (30 day trial) to make a Powerpoint type video. That was easy.

However, I can't seem to figure out how to correctly embed that video into my web page. Camtasia creates a number of files:

YourVideoName.html

YourVideoName.mp4

YourVideoName_controller.swf

swfobject.js

expressInstall.swf

FirstFrame.png

ProductionInfo.xml


I just want to embed this video into my current web page, so that as you scroll down the web page you'll eventually see it sitting there, waiting for the "play" button to be hit.

The .html file that is produced by Camtasia is a full blown web page. I don't want that...I just want to embed the video into my current page. I did add some text to my web page, linked to the .html file and it worked perfectly. Butl, I don't want a text link. I want the video sitting there waiting to go...just like when you embed someone else's YouTube video in your web page.

It's easy, I'm sure. I just don't see it yet.

Any help would be appreciated.

Thanks,

Andyf
#embedding #page #video #web
  • Profile picture of the author Peter Bestel
    Andy

    I don't know if there's a better way to do this now, but this was discussed on the old board. Maybe this discussion will help you:

    The Warrior Forum - How 2 Embed Camtasia Flash into Existing Web Page?

    Peter
    {{ DiscussionBoard.errors[542960].message }}
  • Profile picture of the author Chris Farrell
    [DELETED]
    {{ DiscussionBoard.errors[542974].message }}
    • Profile picture of the author Marty S
      I don't think you should be embedding these at all the way you are trying - using your host for streaming, unless its part of a "private" responder series, even then - you WILL run into streaming delays and frustrated users sending you emails each time the video takes too long to load.

      In Camtasia, produce your file as an FLV, then sign up for an account at amazon, vimeo, jumpcut, viddler etc, and use their code to embed. Trust me, much more reliable way to deliver content and no pain the azz maintentance.
      Signature
      How to make offline videos for clients
      How to add a custom thumbnail image to your Youtube video
      How to CUT THE FAT in your YOUTUBE videos
      {{ DiscussionBoard.errors[542992].message }}
    • Profile picture of the author Andyf
      Chris,

      Thanks a lot for the info. I was doing exactly what you said. However, I didn't select the whole .html text because I thought you couldn't have two complete sets of web page code...like <html>....<head>...and <body> in one web page. So, I was just taking some of the .html text generated by Camtasia.

      If I can take the whole piece of .html code produced by Camtasia and just plop it into my web page, that is easy. I can try that. But, you have no problems doing that yourself?

      Thanks,

      Andy
      Signature
      Fix Your Own Glove!
      Baseball Glove Repair And Restore

      Become A Better Catcher
      Baseball Catcher Training And Drills
      {{ DiscussionBoard.errors[543007].message }}
      • Profile picture of the author Marty S
        Originally Posted by Andyf View Post

        Thanks a lot for the info. I was doing exactly what you said. However, I didn't select the whole .html text because I thought you couldn't have two complete sets of web page code...like <html>....<head>...and <body> in one web page. So, I was just taking some of the .html text generated by Camtasia.

        If I can take the whole piece of .html code produced by Camtasia and just plop it into my web page, that is easy. I can try that. But, you have no problems doing that yourself?
        Maybe I am missing something here Andy, but why do you want to do it this way?
        Signature
        How to make offline videos for clients
        How to add a custom thumbnail image to your Youtube video
        How to CUT THE FAT in your YOUTUBE videos
        {{ DiscussionBoard.errors[543086].message }}
  • Profile picture of the author Mark Dulisse
    In Camtasia, for screen capture, select .flv and not .swf when you produce your video, especially if video is longer than 7 minutes of so.

    That is my experience of putting over 100 videos of mine on webpages.
    Signature
    {{ DiscussionBoard.errors[543104].message }}
  • Profile picture of the author buonarroti
    More good information.
    {{ DiscussionBoard.errors[543218].message }}
  • Profile picture of the author Li Weng
    You should check out Camtasia's own tutorial first:

    Embed an ExpressShow (SWF or FLV) on a Web Page with Camtasia Studio
    Signature

    - Insert backlink here -

    {{ DiscussionBoard.errors[543754].message }}
  • Profile picture of the author queenbuzzy
    Question along these lines:

    What's the benefit of signing up for amazon, vimeo, jumpcut, viddler etc? Why not just have a dedicated server on your current hosting account?

    I'm just getting into videos, (have flash...will travel) and was just planning on embedding the swf with a loader to the flv on my site.

    The video is 20 minutes, so it's pretty big, and I use godaddy for hosting. I was thinking of getting a dedicated server, but haven't heard of the amazon option. What are the benefits?

    Thanks in advance,
    Signature
    {{ DiscussionBoard.errors[543761].message }}
    • Profile picture of the author Marty S
      Originally Posted by queenbuzzy View Post

      Question along these lines:

      What's the benefit of signing up for amazon, vimeo, jumpcut, viddler etc? Why not just have a dedicated server on your current hosting account?

      I'm just getting into videos, (have flash...will travel) and was just planning on embedding the swf with a loader to the flv on my site.

      The video is 20 minutes, so it's pretty big, and I use godaddy for hosting. I was thinking of getting a dedicated server, but haven't heard of the amazon option. What are the benefits?

      Thanks in advance,
      The question is why wouldn't you?

      There are no extra bandwidth charges or delays in loading. The services are faster, easier to use, and you get extra traffic from them.

      If you are serving a video from your own server you are needlessly slowing your own (shared host), delaying the start of the video, and at least occasionally losing a viewer due to poor delivery time. This is a virtual GUARANTEE.

      I have made over 200 tutorial videos and went through all the stuff this guy is trying to do. It's an avoidable headache, and one that some people will only learn after a stream of complaints/email from viewers. Also, keep in mind that only a small percentage of your viewers will actually complain, leaving you in the dark about your true opportunity loss.
      Signature
      How to make offline videos for clients
      How to add a custom thumbnail image to your Youtube video
      How to CUT THE FAT in your YOUTUBE videos
      {{ DiscussionBoard.errors[544246].message }}
  • Profile picture of the author Zubair Zm
    Andy
    Watch some videos here at
    Search YouTube, Myspace, Metacafe, Dailymotion, Megavideo
    rgds
    Zm
    Signature

    Get FREE Autoresponder For Wordpress at AutoresponderForWordpress.com

    Exclusive Private Label Rights To A Brand New Video PLR Business In A Box And Complete Sales Funnel. Every Single Month at DigitalInternetBusiness.com

    {{ DiscussionBoard.errors[543780].message }}
    • Profile picture of the author Wilson Mattos
      Andyf,

      Make sure you produce the videos as .MP4 and NOT .swf...

      Here is what you need to do to insert the Camtasia player and video into your own page:

      1. Open the HTML page generated by Camtasia and find the two "script" calls in the head section of the page. You must put these same calls in your own Web Page. They should look something like this:

      Code:
      <script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">swfobject.registerObject("csSWF", 9.0.115", "expressInstall.swf");
</script>
      2. In the BODY of the Cantasia generated page, you will find a "div id="media" You need to copy this entire div code block and place it where you want the code to appear on your web page

      3. Make sure the files: swfobject.js, FirstFrame.png, *_controller.swf, and your .mp4 are uploaded to the same directory where your web page is located.

      This should do the trick.

      As far as other comments from above, if you have large videos, you probably don't want to stream them from your server. Amazon S3 is a great option for video serving. You might want to look into that. If you need assistance with S3, there are lots of resources available on the subject if you just Google for it. If you need more customized solutions or additional help, such as protecting video content, send me a PM.

      Wil
      {{ DiscussionBoard.errors[543845].message }}
  • Profile picture of the author queenbuzzy
    Thank you Chris and Marty!

    I went around on the Amazon site, but couldn't quite figure out where this service is offered. Could either of you point me in the right direction?

    I have a larger program, (two hours) that I want to have as an auto-download, and have been concerned about streaming issues...if Amazon helps this issue, I'm all for it.

    Thank you so much!
    Signature
    {{ DiscussionBoard.errors[544579].message }}
    • Profile picture of the author Marty S
      qb - I do not use the Amazon S3 service as I do not provide download for any of my video series. I DO use the free amazon video host that is part of every amazon affiliate program. Just look under digital media - widgets.

      Now if you really want people to download your video, you may have to go to a place like FreeIQ or webzonevideo. I host several auto-responder series there. More expensive but much more control over your delivery and presentation.

      However, for 2 hours of content, I would strongly consider membership access (email auto-responder) where the videos can be viewed, rather than downloaded. More control over your content and with anaylitcs, more information about viewership. You will also have to break those videos up into 5 - 10 minute segments - I wouldn't go longer than that.

      If someone really wants to download the videos, why dont you upsell physical CDs to them?
      Signature
      How to make offline videos for clients
      How to add a custom thumbnail image to your Youtube video
      How to CUT THE FAT in your YOUTUBE videos
      {{ DiscussionBoard.errors[544681].message }}
      • Profile picture of the author Andyf
        Marty and Chris,

        Looks like you guys have gone through this and really have the answers for me and some of the other people joining in on this issue.

        I guess the only question now is the difference between Amazon s3 and the Amazon video host from the affiliate program. Any real dissadvantages of using the free affiliate video service...other than some cost for s3?

        Chris, your video is exactly what I want to do. The question is, can you reproduce the exact same thing with the free Amazon host that Marty uses?


        Also, just to clear up my earlier question about Camtasia and FLV, Camtasia 6 does not output FLV any longer. See the following Techsmith info from their website:


        Question
        Is the FLV production format available in Camtasia Studio 6?


        Answer
        No, the new MPEG-4 format replaces FLV and is the default option in most of the production presets. MP4 will play in the Adobe Flash Player just like FLV did. It requires version 9.0.115 of the flash player or later.

        In some instances the MP4 mime type may need to be added to the web server for the MP4 files to play correctly from the web. Please see the following article on instructions to do so.

        For those interested in the technical details...The compression methods used in FLV and MP4 cover the same type of content (real-world, high motion, gradients, etc.). So there's a lot of overlap between the two. In a previous release of Camtasia Studio, we dropped Sorenson Spark compression in the FLV format because the VP6 compression handled the same content, but did it better. In the same way, H.264 does a better job than the VP6 content, so we're replacing an older technology (FLV) with a newer, better one (MP4). MP4 has better quality than FLV at same bitrates. Or said another way, you can get smaller files with MP4 at the same quality as FLV

        So the combination of H.264 video and AAC audio in the MPEG-4 format handles all types of content well, produces high-definition quality with smaller file sizes, and plays in any Flash-enabled browser. It also simplifies the production process for users since they don't have to learn about the strengths and weaknesses of various codecs before choosing a format.

        This change is also part of a broader industry trend to adopt standards-based formats. Adobe has announced a move away from FLV and joined Apple and Microsoft in embracing MPEG-4/H.264 as an outstanding vehicle for online video.
        Signature
        Fix Your Own Glove!
        Baseball Glove Repair And Restore

        Become A Better Catcher
        Baseball Catcher Training And Drills
        {{ DiscussionBoard.errors[544951].message }}
        • Profile picture of the author Marty S
          Originally Posted by Andyf View Post

          Any real dissadvantages of using the free affiliate video service...other than some cost for s3?

          Chris, your video is exactly what I want to do. The question is, can you reproduce the exact same thing with the free Amazon host that Marty uses?


          Also, just to clear up my earlier question about Camtasia and FLV, Camtasia 6 does not output FLV any longer. See the following Techsmith info from their website:
          I think the size might be limited and you do have to put at least 1 affiliate marker in the video promoting something from Amazon.

          There is also FREEIQ, WebVideoZone, JumpCut, Vimeo, Viddler etc. to consider as well. I was just using Amazon as an example.

          Camtasia did remove the FLV option in their latest version - a horrible mistake on thier part, and they so much as admitted it to me claiming a release is forthcoming that will have back in there.
          Signature
          How to make offline videos for clients
          How to add a custom thumbnail image to your Youtube video
          How to CUT THE FAT in your YOUTUBE videos
          {{ DiscussionBoard.errors[545388].message }}
  • Profile picture of the author Chris Farrell
    [DELETED]
    {{ DiscussionBoard.errors[545419].message }}
  • Profile picture of the author rlnorthcutt
    Chris - Thanks for the detailed directions. I personally don't need them, but I appreciate the time and effort... this is what makes WF so great!

    Andy -
    Point#1 - Unless you have some really great reason for hosting the videos, everyone is right... host them elsewhere and embed them in! In fact, this is kind of the WHOLE strategy behind alot of Video marketing systems...

    Host your video on MULTIPLE sites, and have them all link back to the main site. This exposes your video to numerous people and different markets. Its a great way to get exposure.

    Point #2 - If you do need to host on your site (for a security or a paid video, for example), then be sure to check the pathfile. It sounds like that might be the issue... maybe a slash is missing, or a folder name or something.

    If you do decide to host it on your site, feel free to PM me the link and I will be happy to take a look. I am sure there are other warriors who would do the same.

    best regards,
    Ron
    Signature
    {{ DiscussionBoard.errors[546032].message }}
  • Profile picture of the author Andyf
    Wow...this has been a great post!

    I got the answers I needed and it seems to have helped some other people too. I'm definitely going to look at s3...I'm now sure that's what so many people are doing. I just didn't know how people were doing this and was definitely going down the wrong path.

    So, thanks again for all of the responses and links to videos that show how to use s3...this all helped a lot.

    Things are much clearer now. I'm sure when I start using s3 it will take a little time to figure out and get used to, but it sure doesn't seem complicated.

    We'll see....

    Thanks again!

    Andy
    Signature
    Fix Your Own Glove!
    Baseball Glove Repair And Restore

    Become A Better Catcher
    Baseball Catcher Training And Drills
    {{ DiscussionBoard.errors[546851].message }}
  • Profile picture of the author Wilson Mattos
    Andy,

    Make sure to look at this other video thread as well.

    http://www.warriorforum.com/main-int...eo-advice.html

    I posted additional information in there about how to secure your content on S3, etc.

    Wil
    {{ DiscussionBoard.errors[546897].message }}
  • Profile picture of the author LonNaylor
    Here's the EASY "works every time" method:

    Use a HTML IFRAME and set it to display YourVideoName.html

    Size it so everything shows in the IFRAME window, turn off scrollbars.

    Make sure all the Camtasia files are in the same directory as the YourVideoName.html

    That's it...no copy/pasting script code or anything...

    Also works great with Amazon S3

    [edit] - Opps! I see Chris Farrell already suggested this tactic! It's a really smooth way to go and I do it all the time

    Thanks Chris!
    Signature

    Lon Naylor
    Learn Camtasia FAST
    Create Killer PowerPoint Videos
    Screencast Profits: Make MORE money with your Camtasia videos.

    {{ DiscussionBoard.errors[546980].message }}
  • Profile picture of the author Marc43
    Thank you all for your time, this is very valuable . I was looking at the same problem with Camtasia to embed my videos into a an existing page..

    Now lets see if I can make it work lol
    {{ DiscussionBoard.errors[547042].message }}
  • Profile picture of the author queenbuzzy
    Wow! I've been off this thread for less than 24 hours, (y'know, work and sleep and all) and already there is just so much more good information.

    Thank you so much for your willingness to help!

    Marty: the 2-hour program is already created in 3-10 minute clips in swf and on cd that I do physically mail people...I'm trying to create residual income, (not that I don't enjoy burning discs and printing labels) so I'm exploring download/streaming options.

    I think streaming probably is a better way to go, creating a flash page with links to the chapters on the side and setting up a loader so that the video plays on the main part of the page. Access to the page would be through encrypted "membership" access...which is was I was thinking about (downloading 2 hours, or 20 files just takes too long for the enduser) but after reading this thread I'm pretty convinced of it.

    Thank you all for your participation! It's definitely been helpful to a lot of people!
    Signature
    {{ DiscussionBoard.errors[547417].message }}

Trending Topics