This article deals with how you can insert a video into a website using the free Microsoft Expression Web editor. The video will be stored on your own web server (as opposed to being placed on a video sharing site like YouTube), and it will be shown within a web-based video player on the page, which visitors can interact with to play, pause, rewind it, and so on.
I will assume here that you already have a website. If this is not true, please start at the beginning, with How to Create a Website. You should also know how to design web pages with Expression Web, since this tutorial only deals with the specifics of inserting a video.
Your web page should be in HTML5, since the built-in video player was introduced only in that version of HTML, and not in earlier ones. Although Expression Web generates pages in XHTML by default, it is also able to create HTML5 ones. Please see How to Make Expression Web Use HTML5 By Default for more information on this. At the very least, the page on which you place the video should be in HTML5. You can leave the rest of your site in XHTML 1.0 if you like. It doesn't matter.
An alternative to hosting the video on your own website is to put it on a video sharing site. I have a separate tutorial on How to Insert a YouTube Video into Your Website with Microsoft Expression Web for those who prefer that route.
You will probably want your video to be in the MP4 format, encoded with H.264, since that will make it compatible with the largest number of web browsers around. Or, if you need your video to be in a format that is not patent-encumbered, then the WebM format is the next best thing, although it will not work out-of-the-box (at this time) on Internet Explorer and Safari. If your video is currently in some other format, convert it. There are many free video converters available.
If you are conversant with HTML and can code in it without problems, you may prefer to read my tutorial on How to Add a Video to Your Website in HTML (HTML5) instead.
If you are wondering what the web-based video player looks like, see the demo found on the HTML5 video tutorial page that I mentioned earlier (scroll down that page to find it). Although that page was not actually created with Expression Web, but manually coded, the player is the same whether you insert the code with Expression Web or another editor. It differs however from browser to browser, so if you were to use another browser (eg, Firefox, Chrome/Edge) to view that page, the exact controls displayed (ie, Play, Stop, Pause, etc), and their design, may be different.
For the sake of brevity, when I say 'click "File | Save" from the menu' in this tutorial, I mean that you should first click "File" from the menu bar, and when the drop down menu appears, click the "Save" item on it. This applies to all menu items. For example, if I say "Edit | Paste", it means to click the Edit menu, followed by the Paste item that appears on the drop-down menu.
Copy the video file into the same directory (ie, folder) as the web page that will display it. Although you are allowed to put the video into any directory you want, it's probably easiest and least error-prone to just put it in the same place, especially since you will be adding the HTML code manually, and will not be able to rely on Expression Web to form valid URLs from different file paths. In fact, if you didn't understand my previous sentence ("what are file paths? what are valid URLs?"), I strongly recommend that you do this, otherwise you will find that the video player will not display the file. In addition, if your filename contains spaces, I recommend that you rename it to one without any, for reasons explained elsewhere.
The instructions below assume that the file is in the same directory as the page that displays it. You will have to adapt them if you choose to place it in a different folder.
Although Expression Web has menu options (via "Insert | Media") that allows you to insert videos, those options use methods that are now obsolete. For example, both Flash and Silverlight are not supported by any modern browser.
As such, we will have to manually insert the HTML code for the video player ourselves. This is not as difficult as you think, since Expression Web lets you insert HTML easily via its "Code" mode. And its Code mode editor actually recognizes the modern HTML for including videos, even if the Design mode user interface doesn't provide you an easy way to insert or display it.
We will use the following code as the basis.
First select the code in the box above with your mouse. You can do this by dragging your mouse over it to highlight it. Make sure to highlight all of it (including all the angle brackets). Then click the right mouse button while the pointer is hovering somewhere over the highlighted text, to bring up the browser's context menu. Click "Copy" on that menu. This places the code into your Windows clipboard, allowing you to paste it into Expression Web in the next step (provided you don't copy anything else in-between.)
Read this step in entirety before switching back to Expression Web. Then when you switch to the editor, do everything mentioned here (that is, in this step) before returning to this tutorial. Otherwise, Expression Web will hide your text cursor when you switch away, and you may forget where it was supposed to be.
While in Expression Web, click the spot on your web page where you want your video player to appear. This places the text cursor in that position.
Immediately switch to the "Code" mode by clicking the "Code" tab at the bottom of the Expression Web window (next to the "Design" and "Split" tabs). You should now see the HTML for your page, with the blinking text cursor positioned at the equivalent spot on the page. Click "Edit | Paste" from the menu. This will insert the HTML code from this article.
Now you have to adjust the code so that it refers to your actual video file. As it stands, it points
to a file called "demo.mp4" in the same directory (ie, folder) as your web page. Since it's unlikely
that your video is also named "demo.mp4", change "demo.mp4" to the actual name of your
video file.
For example, if your file is called "example.mp4", change the code so that it now reads
"<video src="example.mp4" controls></video>".
Switch to the Design mode again (by clicking the "Design" tab at the bottom of the window). You will
probably only see a blank space where the video is supposed to be. That's because Expression Web 4 uses
an older display engine that does not have all the latest HTML5 changes (including support for
the <video> tag). Don't worry. It will not delete your code but preserve it as-is.
As such, the code will be saved along with the rest of the web page, and will work normally in a real
(modern) web browser.
Save the page with "File | Save" from the menu.
Start up a web browser and open the page. Click the play button on the video player to test it.
If the dimensions of the video is too big, you can actually force the browser to shrink its size. To do this, return to Expression Web. Click the "Code" tab and navigate to the HTML snippet you inserted earlier. Modify the code so that it now includes a width. For example, the following constrains the video player to a width of 720 pixels wide.
Change "720" to whatever width you want. For example, width="1024" means a width of 1024 pixels.
Since you didn't specify a height, the web browser will adjust it proportionately so that the picture does
not become distorted.
Notice that when you type width=" (that is, at the point when you type the opening quotation mark),
Expression Web automatically types the closing quotation mark for you. Be aware of this, so that you do not blindly
type yet another closing quotation mark, leading to invalid code (where you end up with 2 closing inverted commas).
When you are done with your changes, remember to upload not just the page containing the video player, but also the actual video file as well. Then test the online version in your browser, to make sure that you have published everything.
If your video does not appear in the web browser, for example, you get an error message like "No video with supported format and MIME type found" (the exact wording depends on your browser), it means that you either got the filename wrong, or you placed the file in a different directory from your web page. Another possibility is that you are using an unsupported video format.
Copyright © 2019-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a (Self-Hosted) Video to Your Website with Expression Web
