Putting Movie on Web Page

Premiere Pro can output a movie in mp4 format. This mp4 movie can then be displayed in a web page as shown below.

In HTM5, one can use the video tag to display a movie on a web page.

• The optional height and width attributes specify the size of the window in which the movie will play.
• The optional controls attribute adds video controls, like play, pause, and volume.
• The optional text between the <video> and </video> tags is optional and will only be displayed in browsers that do not support the <video> element.
• The optional autoplay attribute means the video will start playing automatically. As noted in Jennifer Niederst Robbins book Learning Web Design (p. 223), "In general, use of autoplay should generally be avoided in favor of letting the user decide when the video should start. autoplay does not work on iOS Safari and some other mobile browsers in order to protect users from unnecessary data downloads."

<video width="1080" height="1080" controls autoplay>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

The movie shown below was done by Rafia Hossain, a former ITE 170 student, as part of her project. To obtain this movie, I right-clicked on the movie in her ITE 170 project page and then saved it to my computer, just like you would save an image.

To determine the natural height and width of a mp4 file, in Windows, you can right click on the mp4 file saved in your computer and choose Properties and then click on the Details tab. For this mp4 file shown below, the dimensions are 1080x1080 and I have displayed it at its natural size using the height and width attributes of the video tag.

The width and height specified in the video tag would depend on the screen resolution of your target devices, the aspect ratio in the movie, the natural size of the movie, the quality of the movie and how much space you want it to occupy on the web page.

To play the movie, click on the rectangle below

Revised: April 14, 2023. Comments to William Pegram, wpegram@nvcc.edu