Comments (18)
@leandromoreira @deedos there was an issue on Clappr (clappr/clappr/issues/941) that prevented the fallback behavior to work properly.
It's been fixed already, and will be included in the next release.
from dash-shaka-playback.
@deedos quick solution - check for MSE support in browser and configure mpeg-dash blayback if MSE is supported and HLS if not. In real world you also need to check for flash support etc (Clappr.Browser.hasFlash)
quick and dirty sample
<html>
<head>
<script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js"></script>
</head>
<body>
<div id="player"></div>
<script>
window.onload = function() {
var player, source, playback, hasMSE,
hls = 'http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8',
mpd = 'https://shaka-player-demo.appspot.com/assets/angel_one.mpd?_=1446383792251';
hasMSE = function() {
var mse = "MediaSource" in win || "WebKitMediaSource" in win;
return !!mse;
}
if ( hasMSE )
{
source = mpd;
playback = DashShakaPlayback;
}
else
{
source = hls;
playback = Clappr.FlasHLS;
}
player = new Clappr.Player(
{
source: source,
plugins: {
'playback': [playback],
},
parentId: '#player'
});
}
</script>
</body>
</html>
from dash-shaka-playback.
I think you can just rely on sources
, it'll look for the first valid source. (and you can provide extension for this behavior)
var player = new Clappr.Player(
{
sources: ['http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8', 'https://shaka-player-demo.appspot.com/assets/angel_one.mpd?_=1446383792251'],
plugins: [DashShakaPlayback],
// now, if you want to force flash you need to put Clappr.FlasHLS on
// this list first otherwise it'll use hls.js
parentId: '#player'
});
from dash-shaka-playback.
Thanks @leandromoreira I forgot to mention sources option.
@deedos just keep in mind browsers that reports support for MPEG-DASH and MSE but dash support is unstable (firefox on desktop) or unusable (firefox on android).
IMHO HLS as primary playback and DASH as fallback looks more interesting at the moment.
from dash-shaka-playback.
Hi @me-vlad and @leandromoreira , thanks you both for the help! It seems like the sources plugin, the cleanest way to go.
I did try with the sources plugin and it works, MPEG-DASH is the priority, but, when using browsers with no MSE support (firefox before 45), Clappr.FlasHLS does not load at all. My code as follow
<html>
<head>
<script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js"></script>
<!-- <script src="../clappr-youtube-playback/bin/hook.js"></script> -->
</head>
<body>
<div id="player"></div>
<script>
var player = new Clappr.Player(
{
sources: ['http://yt-dash-mse-test.commondatastorage.googleapis.com/media/feelings_vp9-20130806-manifest.mpd', 'http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8'],
plugins: {
'playback': [Clappr.FlasHLS, DashShakaPlayback],
},
parentId: '#player'
});
</script>
</body>
</html>
When using Firefox older than 45, the player reports that there is no valid sources (If I remove the MPEG-DASH source, it loads FlashHLS and plays correctly)
@me-vlad It seems to me that MSE and MPEG-DASH on google Chrome has support and it's stable for quite a while now, isn't it ?
Thanks again
from dash-shaka-playback.
@deedos try this:
plugins: [DashShakaPlayback, Clappr.FlasHLS]
from dash-shaka-playback.
@deedos yes, on desktop version of the Chrome MSE support is more stable than on FF.
from dash-shaka-playback.
@leandromoreira I did try plugins: [DashShakaPlayback, Clappr.FlasHLS]
and it didn't work!
thanks
from dash-shaka-playback.
can you test pointing clappr to the header @deedos ?
from dash-shaka-playback.
Hi @leandromoreira . Do you men build clappr after @towerz commit and use it locally for testing ?
from dash-shaka-playback.
yes @deedos 👍
- git clone clappr
- npm install
- npm run release
- use dist/ folder
=)
Since we didn't release a new version yet.
from dash-shaka-playback.
@deedos and try to use latest FF with MSE fixes:
https://www.mozilla.org/en-US/firefox/45.0.2/releasenotes/
https://bugzilla.mozilla.org/show_bug.cgi?id=1258562
from dash-shaka-playback.
@leandromoreira Having some issues building:
npm run release
> [email protected] build /var/www/html/clappr
> webpack --progress
module.js:340
throw err;
^
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/var/www/html/clappr/webpack.config.js:2:15)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
npm ERR! [email protected] build: `webpack --progress`
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is most likely a problem with the clappr package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --progress
npm ERR! You can get their info via:
npm ERR! npm owner ls clappr
npm ERR! There is likely additional logging output above.
npm ERR! System Linux 4.2.0-16-generic
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! cwd /var/www/html/clappr
npm ERR! node -v v0.10.25
npm ERR! npm -v 1.4.21
npm ERR! code ELIFECYCLE
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian
I have tried to install nodejs-legacy but does not work neither. S.O Ubuntu 15.10
thanks
from dash-shaka-playback.
@deedos you need to use node (v5.10.1) in a higher version:
$ rm -rf node_modules
$ npm install
I built a version locally, you can use it to test. http://s000.tinyupload.com/?file_id=75972455017971560158
from dash-shaka-playback.
@deedos do you think you can close this one?
from dash-shaka-playback.
Sorry for the lack of resposne, Was offline for a couple of days.
I could not maks it work as expected: a new error with today hosted versions. When using firefox withou media source support
The error:
[error][Container] error on event container:click trigger - ReferenceError: MediaSource is not defined
Stack trace:
hn@https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js:2:21208
un@https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js:2:20921
d</<.value@https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js:1:4197
d</<.value@https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js:1:3906
d</<.value@https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js:1:2966
E</t.prototype.play@https://cdn.jsdelivr.net/clappr/latest/clappr.min.js:7:31462
p</t.prototype.click@https://cdn.jsdelivr.net/clappr/latest/clappr.min.js:11:2900
p@https://cdn.jsdelivr.net/clappr/latest/clappr.min.js:1:2696
y</e.prototype.trigger@https://cdn.jsdelivr.net/clappr/latest/clappr.min.js:1:4026
E</t.prototype.clicked@https://cdn.jsdelivr.net/clappr/latest/clappr.min.js:7:31880
s/</i.proxy@https://cdn.jsdelivr.net/clappr/latest/clappr.min.js:1:29165
clappr.min.js:11:18330
ReferenceError: MediaSource is not defined dash-shaka-playback.js:2:21208
The code;
<html>
<head>
<script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/clappr.dash-shaka-playback/latest/dash-shaka-playback.js"></script>
</head>
<body>
<div id="player"></div>
<script>
var player = new Clappr.Player(
{
sources: ['http://yt-dash-mse-test.commondatastorage.googleapis.com/media/feelings_vp9-20130806-manifest.mpd', 'http://nasatv-lh.akamaihd.net/i/NASA_101@319270/master.m3u8'],
plugins: {
'playback': [DashShakaPlayback, Clappr.FlasHLS],
},
parentId: '#player'
});
</script>
</body>
</html>
If I change the sources positions ad make the hls first, It works for FF without MSE but for Chrome with MSE, it plays the hls first as well.
Thanks again
from dash-shaka-playback.
Thanks @deedos that's another issue :D
from dash-shaka-playback.
@deedos I just released a new version fixing that behavior (FF with no MSE working), can you test it again?
from dash-shaka-playback.
Related Issues (20)
- Does not play specific manifests with a new url in location . HOT 1
- Clappr doesn't load my mpd
- Adding headers to requests HOT 1
- Playback does not work with dash-shaka-playback v2.3.1 build with shaka-player v2.5.10
- Captions not working
- Shaka fails to play when Clappr.autoplay is false HOT 2
- Shaka namespace needed HOT 3
- SSL Issue locally HOT 3
- External subtitle support HOT 6
- Typo variable make level selector pulsing forever HOT 1
- SMPTE-TT bitmap based Subtitle Support HOT 6
- dash-shaka player could not fetch the SMPTE-TT images HOT 9
- getManifestUri is deprecated
- Error: dash_shaka_playback_1_1002 HOT 7
- Playback ready event logic issue HOT 7
- Level label formatting issue HOT 11
- dash-shaka-playback is not updated with Shaka version above 2.5.5
- dist folder not updated with latest built library
- Error: libwv exception: Invalid Keyid in PSSH
- I want to know how to set default level
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dash-shaka-playback.