I hope that somebody may have a fairly straight forward solve for a problem I am having with uploading videos. I purchased a very basic widget from MuseThemes called Video Essentials so that I can host on a site locally.
When I go to preview, this message keeps popping up: "The media could not be loaded, either because the server or network failed or because the format is not supported"
I work on a Mac and browers are all up to date. Any ideas for a solve or other basic video widget would be greatly appreciated!!!
1. Muse has been End of Life for more than a year. Why are you still you using it?
2. You sure as heck don't need a widget to play video. HTML5 <video> with MP4 is supported by ALL browsers and mobile devices. No special players or plugins needed.
3. Your hosting plan must support the MP4 MIME type and have ample server space and bandwidth to support video. If not, change web hosts or upload your video to YouTube and copy their embed code into your HTML page.
In the interest of saving time, I won't encourage you to keep using Muse anymore because it has no future. Copy & paste this code into a plain text/code editor like Dreamweaver or Brackets and save it as video_test.html.
<!doctype html> <html lang="en"> <head> <title>Bootstrap Responsive Video for version 4.5.2</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--Bootstrap CSS--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/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> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col"> <h2>Self-Hosted ~ Aspect ratio 4:3</h2> <div class="embed-responsive embed-responsive-4by3"> <!--CHANGE PATH & FILE NAME TO YOUR OWN POSTER IMAGE AND VIDEO FILE--> <video title="Your Video Title" poster="path/YOUR_POSTER_IMAGE.jpg" controls="controls" > <source src="path/YOUR_VIDEO_FILE.mp4" type="video/mp4"> </video> </div> </div> </div> <hr> <div class="row"> <div class="col"> <h2>YouTube Hosted ~ Aspect ratio 16:9</h2> <div class="embed-responsive embed-responsive-16by9"> <!--PASTE YT <IFRAME> CODE HERE--> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> </div> </div> <hr> <div class="row"> <div class="col"> <footer>Footer goes here.... </footer> </div> </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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
Change the path & file name to your poster image and video. To test it, upload HTML, MP4 and JPG files to your server.
Post back if you have any questions.
Best advice here, as muse-themes is still running - ask them - may take one to two days before they respond though as their main business is into "withoutcode". Some patience might be needed here.
Be sure, as I watched the tutorial, to have uploaded both the ".mp4" AND the ".webm" file (VLC document - must admit to have no idea about VLC). You may need an additional webm file created by whatever you have - not sure if Premiere Pro can do this - I didn't find it but I am not a film guy, but photo guy so far.
There's a plugin from "fnordware.com" which on Mac needs to open your mac for sources outside the appstore for short time. Then the plugin is installed - you may have a look at the youtube from here: https://www.youtube.com/watch?v=ABJsOpSh8oQ
I did not follow the whole process but can see the "webm" in the export section of premeieres export dropdown.
If you find another solution let us know.