I am in new territory for me here. I am trying to embed AWS S3 hosted video into a html website authored with Netobjects Fusion.
I tried putting in the code from the getting started page and successfully got my website to play the video.js promo video, however, when I try to alter that to play my videos I get an invalid file path error. Below is the altered code. Can anyone direct me as to what I am missing or messing up? Do I need to define the video id somewhere else? Also, I am not sure what to do with the data-setup='{"example_option":true}'> line. Thanks.
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="6915MLD" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
poster="https://s3-us-west-2.amazonaws.com/premiervideotours/PVTx320.jpg"
data-setup='{"example_option":true}'>
<source src="https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.mpg" type='video/mp4' />
<source src="https://https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.webm" type='video/webm' />
</video>
Even after correcting your URLs to the below, I get access denied when visiting them in a browser.
https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.mp4 (mpg to mp4)
https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.webm (removed duplicate https://)
S3 will respond with access denied not only when the permissions of the file don't allow access, but also when the file is not found. So check both whether the files are in the location the URLs point to, and whether they are 'public'.
Re data-setup='{"example_option":true} - there are a couple of options to set up video.js after including the script and css. One is to include a data-setup attribute. The value of the attribute is a json string which can include setup options or be empty, e.g. data-setup='{}. The "example_option" is just that, an example of how it would look if you need to pass setup options.
Related
I am trying to display a TVHeadend stream in the browser as a pre-cursor to get this running on my TV. So I whipped up this sample HTML code where 192.168.0.4 is my server running TVHeadend and the channel UUID is 3df2b09783d8afeb8a323f5025431df7:
<html>
<body>
<video width="720" height="567" autoplay="true" controls>
<source src="http://192.168.0.4:9981/stream/channel/3df2b09783d8afeb8a323f5025431df7?profile=webtv-h264-aac-matroska" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
Whether I show the HTML page locally on my computer or served via a local Apache webserver, the result is always the same: I get an emtpy video player control. The network tab does not show any errors, neither does the console. It does bring a warning however:
"Empty src!"
However the src is clearly not empty.
When I copy the src URL to my browser (Chrome) and call it, it starts downloading the stream (instead of showing it, but that might be expected). Why does the video control not seem to be able to show the video?
Do I have any other debug options I can check out? This problem has bugged me for a while now and I have tried to drill down to the source of it by removing the TV SDK and all other side code just to see if the actual video will play (which it does not).
At first I thought it might've been an authorization issue but then why does Chrome seem to be able to download the stream just fine? I have logged on to TVHeadend in the same browser (in a different tab) to make sure that a missing logon is not in the way of things.
I have also tried putting : in between the "http://" and the IP address to pass the parameters required for basic auth - but to no avail.
Does somebody have any hints as to what might be the roadblock here?
I have a page with this html :
<audio controls="controls">
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/aac" />
</audio>
It works on Firefox and Edge but it doesn't on IE11. My windows version is up to date and I saw it should be supported. I tried to change my settings to be sure ActiveX is enabled and it is.
I also tried with :
<audio controls="controls" src="http://techslides.com/demos/samples/sample.aac">
It doesn't works too.
What can I do?
I tested the sample code with IE 11 browser and I am able to produce the issue.
I try to check the documentation and found this information.
Beginning with Windows Internet Explorer 9, any audio or video content
needs the correct mime type set on the server, or the files won't
play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video.
WebM audio and video files can be supported by installing the WebM
components from The WebM project. The following table shows the
required settings for your web server to host these files correctly.
Microsoft Edge updates introduced WAV support.
Reference:
audio element | audio object
you can see that .AAC format is not in the list but sites like MDN and CANIUSE shows that it is supported.
I also tried with audio type mp4 which also did not worked.
<audio controls="controls">
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/mp4" />
</audio>
It also can be possible that it is some kind of bug with IE browser or issue is related with H.264 format.
As a work around, I suggest you to use mp3 file format which is working fine with IE 11.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<audio controls="controls">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg3" />
</audio>
</body>
</html>
I've been using Video.js to embed mp4 videos, it's a great player, thanks to everyone who develops and works on it. For the most part, it's working great, but I have a few small issues I need to figure out.
Here's one of the video pages; Columbia River Bass Fishing. It's mostly XHTML Transitional, I think mixing the HTML 5 in is causing some issues, especially with attribute values, but as long as it works, I'll figure out the details later. Here's the video.js code:
<video id="WAW_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="ColumbiaRiverSmallmouthBassFishing.jpg" data-setup='{"WAW_option":true}' >
<source src="ColumbiaRiverSmallmouthBassFishing.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" default />
Your browser does not support this video. Maybe you should update your internet browser
</video>
The video stuff works great in Firefox, Chrome and IE11, but no captions. The "captions.vtt" file is correct and IE10 will display the captions locally on my computer, but on the remote server there are no captions. I tried using the full URL location for the VTT file but that didn't work either.
A quick look at the coding on this page should tell you that I'm no expert, but I'd like to try and produce code that works and is compliant, so forgive the stupid questions.
Thanks in advance
Ron B
Change .vtt to .txt rule out if it's a MIME type issue with your web server config.
If you need to add web.config to your root, it needs to list .vtt as an acceptable MIME type.
So I created a video using ScreenFlow on a Mac. Then exported it. It created an m4v file. Then I changed the extension to mp4 and tried it out in the following web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Fooo</title>
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
<body>
<video src="Demo.mp4" width="320" height="200" controls preload></video>
</body>
</html>
It does not play. If I move the pointer where the player is it will show the frame at where the pointer is. So all the frames are there but it will just not play the video. What did I do wrong? How do I fix it?
Following #heff's advice, I deleted the script line. Once it was deleted I get this error message: "Video format or MIME type is not supported."
How do I fix this?
.mp4 == .m4v Different extensions for the same container format. Though .mp4 technically is also equal to .m4a, but .m4v != .m4a. At least I'm pretty sure. :)
Sounds like an issue with your javascript library. Have you tried just using the video tag in a browser that supports HTML5 video, with no library? Just delete the script line and see what happens.
Otherwise try posting a link to the live page where we can check it out.
I don't know if you already solved this, but you should go see the information on this webpage: Video for Everyone!. Specifically, go see the first point of section 2.1 where the author explains that your server must use the correct mime-types, and section 3, where the author explains what codecs you should use (because not every web-browser can read .m4v files).
I've been working on an HTML5 video implementation, but I'm having some issues. I've been following the guide at http://diveintohtml5.info/video.html. I have encoded .m4v, .ogv, and .webm versions of all of the video. Chrome and Firefox have no troubles playing the video. When I attempt to play it in Safari, it loads the video container, but not the video. You see a white space where the video should be, the controls, and the "loading" text. In Web Inspector's network tab, the video's status is "pending" and the mime-type is "undefined". Interestingly, I only experience this problem on the staging site, while it works fine on my local dev.
When I visit the video directly in the browser on local dev, I get the following output in the console:
Resource interpreted as Document but transferred with MIME type video/x-m4v.
GET http://site.dev/content/videos/movie.m4v Plug-in handled load
Note that GET has a little red x to the left of it in the inspector.
My html code looks like:
<video class="html5-video" width="700" controls>
<source src="content/videos/movie.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="content/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="content/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support this video.
</video>
Additionally, the video is ~20mb.
Any thoughts? Thanks!
Well...it turns out that the issue occurred because I was using .htaccess to password protect the directory. Interestingly, all browsers except for Safari would allow access to the video files. Thanks to those who helped!
Try encoding to mp4 and replace this file instead m4v format, update your code and run.
Work's fine.