Skip to main content
Known Participant
September 20, 2020
Question

How do I add non Flash video to a webpage

  • September 20, 2020
  • 2 replies
  • 464 views

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

Thanks

 

    This topic has been closed for replies.

    2 replies

    Jon Fritz
    Community Expert
    Community Expert
    September 21, 2020

    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

     

    DWuser973Author
    Known Participant
    September 23, 2020

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

    Nancy OShea
    Community Expert
    Community Expert
    September 20, 2020

    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
    DWuser973Author
    Known Participant
    September 21, 2020

    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

    Nancy OShea
    Community Expert
    Community Expert
    September 21, 2020

    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