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.
Related
What are the possible solutions this problem: I need to include various sound files to a react app (build into a kiosk with nwjs) on app startup.
Let me explain the expected behavior - I have a nwjs kiosk react app that will run on a Windows machine.
It should grab some UNC paths for sounds over rest api on app startup.
I need to include these paths as resources (located outside the src folder) in the app in order to play the sounds.
Is it even possible?
Linking from the project's src folder is clear to me. But how to link paths outside the src folder when I don't even know the paths beforehand?
import OKSound from "./OK.wav";
Thank you!
Looks like there is no issue with playing sounds from "outside" with the audio tag, but it's really playing a sound only after creating an exe with nwjs!
const url = "http://example.com/sound.wav";
<audio autoPlay>
<source src={url} type="audio/wav" />
Your browser does not support the audio element.
</audio>
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.
Angular loads some fonts when starting.
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
When I start nodewebkit and I'm offline, it seems that try to load the fonts slows down the app...can I hold this font offline without loading?
Or angular alwasy watch online for this fonts?
Thanks!
This is not angular's concern. In HTML5 You can use an appcache for that.
as noted in http://www.w3schools.com/
HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection.
create a file beside your index.html named resource.appcache
add the link to the following files you want to cache inside resource.appcache
CACHE MANIFEST
# v1.0.0
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
then in your html, link it like
<!DOCTYPE HTML>
<html manifest="resource.appcache">
...
</html>
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.
I'm getting started with Angularjs and fallen at the first hurdle :-(
i've installed node (windows installer) and the webstorm ide. in webstorm i've installed the angularjs plugin and in the html typing 'ng' prompts all the ng templates in a dropdown, so this look ok.
cutting and pasting in the demo html5 (under the heading 'The Basics' at http://angularjs.org/) and running in webstorm and navigating to the file url (in firefox or chrome) however the angular statement '{{yourName}}' isn't binding at all - it's rendered out as a literal. Anyone know where i'm going wrong ?
The example on the home page was using protocol-less (or protocol-relative) URLs (http://www.paulirish.com/2010/the-protocol-relative-url/). While those are very handy, protocol-relative URLs don't play nicely with the file:// protocol in this case. Simply your browser is trying to retrieve AngularJS library from the local file system. To fix it you need to add protocol:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Try prefixing the ng tag with data like data-ng-model.