Highlighted

How do I add non Flash video to a webpage

New Here ,
Sep 20, 2020

Copy link to clipboard

Copied

I'm just looking to add an Mpeg or Avi video to a web page. any help is greatly aprreciated.

Thanks

 

Views

93

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How do I add non Flash video to a webpage

New Here ,
Sep 20, 2020

Copy link to clipboard

Copied

I'm just looking to add an Mpeg or Avi video to a web page. any help is greatly aprreciated.

Thanks

 

Views

94

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 20, 2020 0
Adobe Community Professional ,
Sep 20, 2020

Copy link to clipboard

Copied

MPEG and AVI are not suitable for the web.  You need a compressed file format that doesn't consume too much bandwidth.  For best cross browser results, convert native media to MP4 or M4V for video, or MP3 for audio.

 

If you don't want to host the media files yourself, upload it to YouTube and paste the YouTube embed code into your web page.  This is an example of embedded YouTube video in 4 aspect sizes using Bootstrap's responsive framework.

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video Examples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<!--Search form-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>


<div class="container">
<div class="row">
<div class="jumbotron mx-auto">
<h2>Bootstrap 4 in Dreamweaver</h2>
<p>Responsive video deomonstration.  This uses YouTube but any MP4 video will work. </p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<footer>Footer goes here.... </footer>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

 

Post back if you have any questions.

 

 

 

 

 

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 20, 2020 0
New Here ,
Sep 21, 2020

Copy link to clipboard

Copied

Thank you so much for your reply

 

Is there an easier way to add an MP4 video to a webpage without dealing with code?

 

 If I go to Insert: HTML I can insert a Flash Video.. that's easy enough

Can I use any of the other commands under Insert: HTML such as Plugin to insert my video without dealing with code?

Thanks again

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 21, 2020 0
Adobe Community Professional ,
Sep 21, 2020

Copy link to clipboard

Copied

Which version of DW do you have?  In Dreamweaver CC, go to Insert > HTML5 Video.  Use your Properties Panel (Ctrl + F3) to fill in the video attributes.  If you don't have a modern version of DW, you'll need manually code from the example in Jon's reply.

 

Nowadays, native browser APIs are all that's needed to playback MP4 or M4V video.  A few years ago, we relied on Flash and other 3rd party plugins but those days ended when browsers quit supporting plugins.  Flash Player will officially end 3 months from now on Dec 31st 2020.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 21, 2020 0
New Here ,
Sep 23, 2020

Copy link to clipboard

Copied

Thank you for your reply.

I have the latest version, I tried your steps and seems to be working okay, is there an advantage for using the code over using Insert > HTML5 Video?


Thanks again

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 23, 2020 0
Adobe Community Professional ,
Sep 23, 2020

Copy link to clipboard

Copied

The code in my first reply is more advanced. 

1. The layout is responsive.

2. The video's aspect ratio is maintained on any size device (mobile, tablet or desktop).

3. Video source can be YouTube, Vimeo or your own MP4 (your choice).

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 23, 2020 0
Adobe Community Professional ,
Sep 21, 2020

Copy link to clipboard

Copied

Now days, we use the HTML5 <video> tag with .mp4 files...

 

How to use <video> tags: https://www.w3schools.com/html/html5_video.asp

Convert video to .mp4: https://video.online-convert.com/convert-to-mp4

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 21, 2020 1
New Here ,
Sep 23, 2020

Copy link to clipboard

Copied

Thank you for your response, the two links are very helpful

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 23, 2020 0
Adobe Community Professional ,
Sep 23, 2020

Copy link to clipboard

Copied

in complement, I will add this link wich can be really helpfull sometimes

http://www.mirovideoconverter.com/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 23, 2020 0