Embedding Videos on a Web Page 2010
Embedding Videos on a Web Page
Introduction
This workshop will show you three ways to embed a video on a web page: Embed the code provided with a video on YouTube, embed the code provided with a video on Screencast, and embed a video using JW Player. While this is not an exhaustive list of ways to embed video on a page, it does provide some options.
Table of Contents
Introduction .................................................................................................................................................. 1 Video Format and Length ............................................................................................................................. 1 Embed a YouTube Video ............................................................................................................................... 2 Using YTP .................................................................................................................................................. 2 . Using the Regular YouTube Embed Method ............................................................................................. 2 Embed a Vimeo Video ................................................................................................................................... 4 Embed a Screencast Video ............................................................................................................................ 5 Embedding a Flash Video Using JW Player with Accessible Controls ........................................................... 8 Embedding a Video for Flash and HTML5 Output with JW Player ............................................................. 11 . Captioning Videos ....................................................................................................................................... 11
Video Format and Length
There are many different video formats: mpeg, QuickTime (.mov), Windows Media Player (.wmv), Real Player (.rm), Flash (.flv), etc. There are two times to consider video format: when you upload a video to a video sharing website, and when you display it on your page. Keep in mind that all video formats require end users to have a plug‐in installed in their browser, and that all plug‐ins are freely available. You should always include a link to download the required plugin on the same page as your video. Of all the video plug‐ins, Flash is currently the most ubiquitous.
SPH Web Services
Page 1
Embedding Videos on a Web Page 2010
The length of your video is important in determining whether or not you can display it on a web page. The School of Public Health does not have video streaming technology. Long, steaming videos should be hosted by ITCom. We can host shorter, non‐streaming videos here at SPH. YouTube can host videos up to 10 minutes long for free. Screencast can host up to 2 gigabytes of video files for free.
Embed a YouTube Video
YouTube accepts many video formats, but length cannot be more than 10 minutes. Videos are output to your web pages as Flash videos. Hosting your videos on YouTube has the advantage of making them searchable on YouTube, perhaps bringing traffic to your website.
Using YTP
SPH uses a special player called “YT Player” that makes embedded YouTube videos more accessible. All you need to know is the YouTube ID of your movie. For example, if the URL of your YouTube video is http://www.youtube.com/watch?v=d6HdYNorI7c, then the YouTube ID of your video is d6HdYNorI7c. You will need to insert the following code into the head section of your HTML page: <!‐‐ Stylesheet and JavaScripts for Accessible Controls for the YouTube Embedded Video Player ‐‐> <link rel="stylesheet" type="text/css" href="/richmedia/ytp/css/ytp.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <script type="text/javascript" src="/richmedia/ytp/js/ytp.js"></script> Next, at the point where you want your video to be displayed, enter this code: <div class="ytplayerbox"> <span class="ytmovieurl: YOURVIDEOID">YOURTITLE</span> </div> Be sure to replace “YOURVIDEOID” with your actual video ID, and “YOURTITLE” with the title of your video.
Using the Regular YouTube Embed Method
Any video on YouTube that displays the video’s URL and embed code to the right of the video is embeddable in a web page. However, you should only embed videos in your web pages that belong to you. SPH has a YouTube channel (http://www.youtube.com/user/sphweb) and you can request that your video be uploaded to it. Or, you can create your own YouTube account. Please contact
[email protected] for more information.
SPH Web Services
Page 2
Embedding Videos on a Web Page 2010
Once your video is uploaded, YouTube allows you to customize the way video is displayed when embedded on a web page. Click the Share button, then the Embed button to configure the options:
When you are satisfied, copy the embed code displayed above these options. That is what we will paste into your web page Here are the steps using Adobe Dreamweaver: 1. 2. 3. 4. Place your cursor at the point on your page that you want the video inserted Insert an empty paragraph by hitting the Enter key on your keyboard Switch to Code View Paste the code
Here is an example of how it will look in code view: <iframe width="350" height="229" src="http://www.youtube.com/embed/YuGhvMtKrPI" frameborder="0" allowfullscreen></iframe> That’s all there is to it, except of course to save and upload your web page, and view it in your browser. Unfortunately, there is no way to customize the screenshot that is displayed before the user clicks the play button.
SPH Web Services
Page 3
Embedding Videos on a Web Page 2010
Embed a Vimeo Video
Embedding a video posted on Vimeo is much like embedding one posted on YouTube. Go to the Vimeo page that displays your video. Click the Embed symbol, as shown on the left: You will see a window like this one pop up:
SPH Web Services
Page 4
Embedding Videos on a Web Page 2010
Copy the code in the "ged the embed code" section of this window. Then switch back to Dreamweaver and do the following: 1. 2. 3. 4. Place your cursor at the point on your page that you want the video inserted Insert an empty paragraph by hitting the Enter key on your keyboard Switch to Code View Paste the code
Embed a Screencast Video
SPH Web Services
Page 5
Embedding Videos on a Web Page 2010
Screencast is a solution for academic professionals looking to manage and share videos, images, documents, or anything else online. It is provided by TechSmith. Currently, free Screencast accounts provide 2 gigabytes of storage and 2 gigabytes of monthly bandwidth and pro accounts provides 25 gigabytes of storage and 200 gigabytes of monthly bandwidth for $99.95 a year. Please note that if you already use the screenshot capture program Jing, you already have a Screencast account. Once your Screencast account is set up, you can create folders and upload videos. (For files over 100MB, you must use a Desktop Uploader.)
Once your video finishes uploading, close the upload video dialogue window and click on your video. Click the Share tab to find the embed code.
SPH Web Services
Page 6
Embedding Videos on a Web Page 2010
Copy the text inside the Embed box. That is what we will paste into your web page Here are the steps using Adobe Dreamweaver: 1. 2. 3. 4. Place your cursor at the point on your page that you want the video inserted Insert an empty paragraph by hitting the Enter key on your keyboard Switch to Code View Paste the code
Here is an example of how it will look in code view:
5. Please add a simple “noembed” tag to provide information about the video for those that cannot view it. For example, for this video, I added the following just before the closing </embed> tag: “<noembed>Learn about the many advantages of being a faculty member at the University of Michigan School of Public Health.</noembed>”
SPH Web Services
Page 7
Embedding Videos on a Web Page 2010
That’s all there is to it, except of course to save and upload your web page, and view it in your browser. Unfortunately, there is no way to customize the screenshot that is displayed before the user clicks the play button. As always, please contact
[email protected] with any questions.
Embedding a Flash Video Using JW Player with Accessible Controls
JW Player is a video player from Longtail video that is installed on the SPH web server. The Accessible Controls come from the Ohio State University Web Accessibility Center, http://wac.osu.edu/examples/jwplayercontrols/. An example of a web page that uses this technique can be found at http://www.sph.umich.edu/symposium/2008/videos/crimmins2.html. There is much more involved in using JW Player than there is in embedding a video hosted by YouTube or Screencast. However, with JWPlayer, you can control over the screenshot used before the user clicks the play button and add text transcripts. To use the JW Player, your video must be in the Flash format (.flv). Be sure to ask the company that is creating your video for you to give you a copy of the movie in Flash if you plan to use JW Player. It must also be uploaded to the SPH web server. Please contact
[email protected] for help uploading your Flash video file. There are five things you will need to know about your video: 1. video height 2. video width 3. location of video on the SPH server 4. location of screenshot on the SPH server
SPH Web Services
Page 8
Embedding Videos on a Web Page 2010
5. description of video Web Services (
[email protected]) can help you determine what these values should be. The following code should be inserted into the head section of your document (text that is specific to your vido and must be changed is in red): <link rel="stylesheet" type="text/css" href="/richmedia/jwplayercontrols/js/dojo/dijit/themes/tundra/tundra.c ss" /> <link rel="stylesheet" type="text/css" href="/richmedia/jwplayercontrols/css/jwpc.css" /> <!--[if gte IE 6]> <link rel="stylesheet" type="text/css" href="/richmedia/jwplayercontrols/css/jwpc-ie.css" /> <![endif]--> <script type="text/javascript"> djConfig = { parseOnLoad : true, debug: false }; </script> <script type="text/javascript" src="/richmedia/jwplayercontrols/js/dojo/dojo/dojo.js"></script> <script type="text/javascript" src="/richmedia/jwplayercontrols/js/dojo/jwpc/jwpc.js"></script> <script type="text/javascript" src="/richmedia/jwplayercontrols/js/swfobject.js"></script> <script type="text/javascript"> /* * Player configuration */ var jwpc_videoheight = "360"; // height of video var jwpc_videowidth = "480"; // width of video // Accessibility related variables var jwpc_captionfile = null; //set to null if no captions, path can be relative or absolute //jwpc_captionfile = null; // use this if no caption track var jwpc_audiodescfile = null; // set to null if no audio description track, path can be relative or absolute //jwpc_audiodescfile = null; // use this if no audio description var jwpc_advolume = "75"; // percent volume of audio description var jwpc_ccfontsize = "16"; // size in pixels of caption font within player screen var jwpc_accessibilityplugin = "/richmedia/jwplayercontrols/flashplayer/accessibility.swf"; // our player uses local accessibility plugin, path must be relative to player.html file // Locations of files.
SPH Web Services
Page 9
Embedding Videos on a Web Page 2010
// Video file can be a path relative to the player or a fully qualified URL (see Longtailvideo tutorials for how to identify a streaming source). // Other variable paths can be relative to the HTML file or absolute. var jwpc_videofile = "[path to video with filename here]"; var jwpc_previewimage = "/images/logo_for_jwplayer.png"; var jwpcplayer = "/richmedia/jwplayercontrols/flashplayer/player.swf"; var jwpc_showflashcontrolbar = false; // setting true will show control bar in Flash movie and disables screen click for fullscreen var jwpc_token = null // see readme for notes on streaming security </script> The following code should be inserted into the body section of your document (that is, where ever you want to display the video):
<noscript><p>The media player on this page requires JavaScript be enabled.</p></noscript> <h3 class="jwpc_semantic" id="jwpc_playerheader">Video Player Controls</h3> <p class="jwpc_semantic" id="jwpc_playerdesc"> Screen reader users:<br /> Tab into the tool bar.<br /> Then turn the virtual cursor/buffer off to enable pass-through mode.<br /> For JAWS: Insert + Z.<br /> For NVDA: Caps Lock + Space Bar.<br /> For Window-Eyes: Ctrl + Shift + A.<br /> Right and left arrow keys navigate tool bar controls.<br /> Keyboard shortcuts are also available while in pass-through mode:<br /> Alt Control P for play and pause.<br /> Alt Control S for stop.<br /> Alt control M for mute.<br /> Alt control R doubles size of player.<br /> Alt control T toggles focus between elapsed time and toolbar.<br /> VoiceOver users: Use the Enable Player VoiceOver Access button to make the toolbar button text display and then use the Focus Toolbar button to jump into the toolbar. (VoiceOver with Safari 3, only. Safari 4 beta does not work with toolbar. Disable VoiceOver and use keyboard shortcuts.) </p> <div class="tundra" id="jwpc_playercontainer" style="visibility:hidden"> <h4 class="jwpc_semantic" id="jwpc_toolbarheading">Begin Video Toolbar</h4> <div id="jwpc_playertoolbar"></div> <div id="jwpc_timer"><span id="jwpc_timerlabel">Elapsed time: indeterminate</span></div> <div id="jwpc_captionarea"></div> <div id="jwpc_playerwrapper"> <div id="jwpc_playerplaceholder">You will need <a href="http://get.adobe.com/flashplayer/">the Flash Player</a> to see this video.</div> </div> </div>
The video width, video height, location of video on the SPH server, location of screenshot on the SPH server, and the description of the video all need to be changed in the above code.
SPH Web Services
Page 10
Embedding Videos on a Web Page 2010
Embedding a Video for Flash and HTML5 Output with JW Player
Most Apple products like iPhones and iPads cannot display Flash video. If you need your video to play in Flash for some visitors, and in HTML 5 for others, use the following configuration: The following code should be inserted into the head section of your document <script type='text/javascript' src='/richmedia/jwplayer/jwplayer.js'></script> The following code should be inserted into the body of your document where you want the video to appear (text that is specific to your vido and must be changed is in redf): <div style="text-align:center;"> <div id='mediaplayer'></div> <script type="text/javascript"> jwplayer('mediaplayer').setup({ 'flashplayer': '/richmedia/jwplayer/player.swf', 'id': 'playerID', 'width': '640', 'height': '480', 'file': '[path to video with filename here]' }); </script> </div>
Captioning Videos
Please see the page http://www.sph.umich.edu/computing/web/video.html for important information on captioning videos.
SPH Web Services
Page 11