how do I add an MP4 video to an HTML page?

  • 1
  • Question
  • Updated 2 years ago
I am not sure how to add my MP4 video to a web page
Photo of Malcolm Robinson

Malcolm Robinson

  • 5 Posts
  • 0 Reply Likes

Posted 2 years ago

  • 1
Photo of Malcolm Robinson

Malcolm Robinson

  • 5 Posts
  • 0 Reply Likes
I have got a video up and running here: http://www.presenttruth.co.uk/sendowl-test.html

Now need size to adjust to screen and a start play button...
Photo of Rick Stone

Rick Stone

  • 4492 Posts
  • 2002 Reply Likes
Seeing as this is being asked in the Camtasia forum, I'd say in this case you would do well to drop the video into Camtasia, adjust the size there. Then use the Camtasia software to produce the video along with the Smart Player files.

The Smart Player files present the video from an HTML page.

Cheers... Rick :)
Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
looks like another photo finish :)
Photo of Malcolm Robinson

Malcolm Robinson

  • 5 Posts
  • 0 Reply Likes
Hi thanks for response, I don't see a Smart Player option under Share, where do I find this?

thanks,
Malcolm
Photo of Malcolm Robinson

Malcolm Robinson

  • 5 Posts
  • 0 Reply Likes
done it... will the film adjust to the size the viewer has available?  many thanks
Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
I assume your video is from a Camtasia project?

if so, easiest quick solution is to produce and share to [free] screencast.com

the video will be embedded in a nice, user friendly web page

just share the link provided to allow others to view the video
Photo of Malcolm Robinson

Malcolm Robinson

  • 5 Posts
  • 0 Reply Likes
Hi, thanks for your reply. I want to embed the ideo on my website...
Photo of Dubie

Dubie

  • 962 Posts
  • 742 Reply Likes
As mentioned you can custom produce your video with the smartplayer and use the html file in the folder Camtasia produces as your page template and edit to your liking.

I usually also rename that file to index.html and than upload the whole folder to my server and just link to that folder.

Most browsers will look for and show the index.html file without you actually linking to it.


Another way you can try is use this code as your page template.

This is a responsive video code !!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>responsive video</title>
<link rel="stylesheet" href="YOURPAGE>CSS" media="screen">
<style media="screen">
body {
    background: #f0f0f0;
 }
.videobox {
    display:block;
    width:60%;
    min-width:240px;  /* or thereabouts */
    margin: 1em auto;
    box-shadow: 0.5em 0.5em 0.5em #999;
  }
</style>
</head>
<body>
<!--Remove words control or autoplay if not wanted
but you need to have at least one of them-->
<video class="videobox"  controls autoplay>
 <source src="http://YOURVIDEO.mp4"; type="video/mp4">
</video>
</body>
</html>
Add your other content and style it (CSS) to your liking.

You can of course edit the above code to suit your needs also.

Here is an example of the above code without any styling added.
http://demotestsite.info/demotut/vidcode

View the page source to see the code

:)
(Edited)