• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How do I add non Flash video to a webpage

New Here ,
Sep 20, 2020 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

306

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
community guidelines
Community Expert ,
Sep 20, 2020 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— Product User, Community Expert & Moderator

Votes

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
community guidelines
New Here ,
Sep 21, 2020 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

Votes

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
community guidelines
Community Expert ,
Sep 21, 2020 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— Product User, Community Expert & Moderator

Votes

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
community guidelines
New Here ,
Sep 23, 2020 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

Votes

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
community guidelines
Community Expert ,
Sep 23, 2020 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— Product User, Community Expert & Moderator

Votes

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
community guidelines
Community Expert ,
Sep 21, 2020 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

 

Votes

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
community guidelines
New Here ,
Sep 23, 2020 Sep 23, 2020

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Community Expert ,
Sep 23, 2020 Sep 23, 2020

Copy link to clipboard

Copied

LATEST

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

http://www.mirovideoconverter.com/

Votes

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
community guidelines