I've been trying to stream a rtmp video on Angular, but for some reason it doesn't work
my code is
<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="video_rtmp_url" type="rtmp/mp4">
</video>
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
The result I get is this:
Obs: I've ran the "npm install --save videojs" command
Obs²: i'm using ruby on rails on the background, there's no direct relation between it and the video player yet, but on the rails views, the exact same code works fine
Obs³: There's no error or something related on the console
Besides that, what are the other options to stream RTMP on Angular?
Thanks!
The HTML5 tag does not support RTMP protocol.
RTMP was originally an Adobe protocol and flash players did support it.
Some HTML5 Javascript based video players, such as video.js that you are using, will support RTMP, but they generally do this by falling back to flash so you must have flash installed and available for it to work in this case.
Related
I'm working on a create-react-app project, the project is supposed to show a background video on landing page.
It is working perfectly on localhost:3000 but when I upload to amplify hosting, video stop showing.
I already tried to call the same video directly from this url http://ormuxwater.com/MobterVideo.mp4 on the DOM by modifying it on developer console and it is still not showing anything, so my guess is that is not a folder file location problem
I also tried calling it from different places.
first try: import MobterVideo from "../../assets/MobterVideo.mp4";
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="{MobterVideo.mp4}" type="video/mp4" />
</video>
second try:
// calling it directly from public folder
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="/MobterVideo.mp4" type="video/mp4" />
</video>
Is there something we need to take care for videos to work when uploading to aws amplify?
console is not returning errors and I don't know what else to look
You can see working demo in https://mobter.mx
You have to upload the video to an AWS S3 bucket (cloud hosting) and then you can src the file, that's the only way that worked for me; although I guess you could use a different cloud hosting service, but I guess it's probably better to us S3 if you're using Amplify. Here are the instruction on how to do it:
https://docs.sumerian.amazonaws.com/tutorials/create/beginner/s3-video/
You should only need steps 1 & 2
I'm trying to load a VOD on shaka player.
this is my Url:
https://5b48f8f32d3be.streamlock.net/023a27950bd44774/mp4:22436e792e8b42de_HD.0.mp4/playlist.m3u8
I keep getting 4032 error in the console and I've searched a little bit about it. In the shaka document, the 4032 error has mentioned as CONTENT_UNSUPPORTED_BY_BROWSER. But when I'm testing my URL on the shaka player test URL everything is working fine.
https://shaka-player-demo.appspot.com/demo/#asset=https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd;lang=en-US;build=uncompiled
if my browser was the problem, it shouldn't play on the test URL too.
What should I have to do to shaka support HLS?
Much of the HLS content out there has MPEG2-TS streams, which many browsers don't support. To work around this issue, Shaka Player supports transmuxing TS to MP4 so the browser can play it. This is done using the mux.js library. This library needs to be loaded in a separate script tag before Shaka Player is loaded. For example, here is how the Shaka Player demo does it.
Add this two files in the index.html file.
<script src="https://cdn.jsdelivr.net/npm/mux.js#5.5.3/dist/mux.min.js"> </script>
<!-- Load the Shaka Player library -->
<script src="https://cdn.jsdelivr.net/npm/shaka-player#3.2.2/dist/shaka-player.compiled.js"></script>
This should be able to transmux MPEG2-TS streams to MP4 so they can be played in browsers that don't support it. And this helps in changing the resolution of the video.
And use const shaka = require("shaka-player/dist/shaka-player.ui.js");
instead of shaka-player package.
I am trying to add a video 2mb to my evoq web site. I get a error says video.mp4 - Extension not allowed. I have added mp4 to Allowable File Extensions part. I tried to add mp3 and i got the same error. I am trying to add the video to HTML Pro module. Do I need to select another module for adding videos?
I have just done it. I went to Site Assets,uploaded the mp4. Then I clicked on the mp4 to get the url.
<video width="1056" height="594" autoplay="autoplay" loop="loop">
<source src="https://test.windows.net/portals-sandbox2/1/Images/yourvideo.mp4?sr=b&si=DNNFileManagerPolicy&sig=0HYBH1YbfYIZr3h2tGgsiRMY66YW0YJsVtMF9EIMq0k%3D×tamp=1526412367032" type="video/mp4">
</video>
As per title, I am trying to render a Jinja2 template with an html5 tag using a Flask backend on Google App Engine. It works with no problems of chrome/firefox (windows/android) but no luck on safari for iOS (tested on iphone 7).
<video id="media-video" width="100%" muted controls>
<source src="{{url_for('static', filename = 'test.mp4')}}" type="video/mp4">
Not supported
</video>
I have searched and read about it (e.g.
HTML5 Video tag not working in Safari , iPhone and iPad) but my case seems somehow different ... no errors are displayed but the video does not seem to be loaded (the video is h.264).
Any idea on why?
Are flask/google-app-engine adding complexity to the problem?
Try a different tag structure:
<video id="media-video"
width="100%"
src="{{url_for('static', filename = 'test.mp4')}}"
type="video/mp4"
muted controls
>
</video>
I am seeking an easy and light weight way to upload a small file to a REST API using CORS.
I am using the following plugin:
angular-file-upload
The problem is that it uses swf fallback for deprecated browsers, that don't support the formData object(such as IE 8 and IE 9).
I have opened an issue on github on this matter, but no luck so far.
Which means that I cannot upload a file using CORS on those browsers, which is something I cannot allow (many users still use IE).
angular-file-upload has a solution for old broswers(such as ie8,9),
just put those code before "angular-file-upload-shim.js"
<script>
//optional need to be loaded before angular-file-upload-shim(.min).js
FileAPI = {
jsPath: '/js/FileAPI.min.js/folder/',
staticPath: '/flash/FileAPI.flash.swf/folder/'
}
</script>
you can visit this page on github for more detail.