Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] fix: trigger playback ready event when rendered #75

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

[WIP] fix: trigger playback ready event when rendered #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ad3c140
fix: trigger playback ready event when rendered
kslimani Jan 29, 2020
a162613
fix: store user interaction before setup Shaka instance
kslimani Jan 29, 2020
2296dd1
fix: avoid uncaugth error when manifest not available
kslimani Jan 30, 2020
2393e2a
chore: use latest level selector plugin in dev. index page
kslimani Jan 30, 2020
8244eeb
docs(readme): update jsDelivr script urls
kslimani Jan 30, 2020
a4535ae
feat: add level property in PLAYBACK_LEVELS_AVAILABLE event object
kslimani Jan 31, 2020
74c8a62
fix: handle tracks with multiple languages
kslimani Feb 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

A [clappr](https://github.com/clappr/clappr) playback to play dash based on the amazing [shaka-player](https://github.com/google/shaka-player).

> CDN JSDELIVR: https://cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.js
> CDN JSDELIVR: https://cdn.jsdelivr.net/npm/dash-shaka-playback@latest/dist/dash-shaka-playback.min.js
>
> CDNJS: https://cdnjs.cloudflare.com/ajax/libs/dash-shaka-playback/2.0.5/dash-shaka-playback.js
>
Expand All @@ -24,8 +24,8 @@ A [clappr](https://github.com/clappr/clappr) playback to play dash based on the
```html
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dash-shaka-playback@latest/dist/dash-shaka-playback.min.js"></script>
</head>

<body>
Expand Down
4 changes: 2 additions & 2 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@
})
}
</script>
<script src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/level-selector@latest/dist/level-selector.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./dist/dash-shaka-playback.js"> </script>
<script type="text/javascript" src="//cdn.jsdelivr.net/clappr.level-selector/latest/level-selector.min.js"></script>
</body>
</html>
71 changes: 60 additions & 11 deletions src/clappr-dash-shaka-playback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,24 @@ class DashShakaPlayback extends HTML5Video {
}

getCurrentTime() {
return this.shakaPlayerInstance.getMediaElement().currentTime - this.seekRange.start
return this.shakaPlayerInstance
? this.shakaPlayerInstance.getMediaElement().currentTime - this.seekRange.start
: 0
}

get _startTime() {
return this.seekRange.start
}

get presentationTimeline() {
return this.shakaPlayerInstance.getManifest().presentationTimeline
// Manifest may equals null (for example, source load failure)
let manifest = this.shakaPlayerInstance
? this.shakaPlayerInstance.getManifest()
: null

return manifest
? manifest.presentationTimeline
: null
}

get bandwidthEstimate() {
Expand All @@ -99,7 +108,11 @@ class DashShakaPlayback extends HTML5Video {
}

getProgramDateTime() {
return new Date((this.presentationTimeline.getPresentationStartTime() + this.seekRange.start) * 1000)
let presentationStartTime = this.presentationTimeline
? this.presentationTimeline.getPresentationStartTime()
kslimani marked this conversation as resolved.
Show resolved Hide resolved
: null

return new Date((presentationStartTime + this.seekRange.start) * 1000)
}

_updateDvr(status) {
Expand Down Expand Up @@ -127,7 +140,10 @@ class DashShakaPlayback extends HTML5Video {

play () {
if (!this._player) {
this._setup()
// User interaction is lost when Shaka instance load() fetch the manifest
// Calling consent() before setup Shaka instance fix this issue (Safari browser on macOS)
this.consent()
process.nextTick(() => this._setup())
}

if (!this.isReady) {
Expand Down Expand Up @@ -155,15 +171,13 @@ class DashShakaPlayback extends HTML5Video {
// skipping HTML5Video `_setupSrc` (on tag video)
_setupSrc () {}

// skipping ready event on video tag in favor of ready on shaka
_ready () {
// override with no-op
this.trigger(Events.PLAYBACK_READY, this.name)
}

_onShakaReady() {
this._isShakaReadyState = true
this.trigger(DashShakaPlayback.Events.SHAKA_READY)
this.trigger(Events.PLAYBACK_READY, this.name)
}

get isReady () {
Expand Down Expand Up @@ -385,11 +399,46 @@ class DashShakaPlayback extends HTML5Video {
this._checkForClosedCaptions()
}

_fillLevels () {
if (this._levels.length === 0) {
this._levels = this.videoTracks.map((videoTrack) => { return {id: videoTrack.id, label: `${videoTrack.height}p`} }).reverse()
this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this.levels)
_hasMultipleLanguages() {
let lang
let tracks = this.videoTracks

for (let i = 0; i < tracks.length; ++i) {
if (i === 0) {
lang = tracks[i].language
continue
}

if (lang !== tracks[i].language)
return true
}

return false
}

_fillLevels () {
if (this._levels.length !== 0)
return

// If multiple language available, add it to label
let labelWithLanguage = this._hasMultipleLanguages()

this._levels = this.videoTracks.map((videoTrack) => {
return {
id: videoTrack.id,
level: videoTrack,
label: labelWithLanguage ? `${videoTrack.bandwidth/1000}Kbps - ${videoTrack.language}` : `${videoTrack.bandwidth/1000}Kbps`,
}
})

if (labelWithLanguage)
// Sort by language ASC, bandwidth DESC
this._levels.sort((a, b) => (a.level.language > b.level.language) ? 1 : (a.level.language === b.level.language) ? ((a.level.bandwidth < b.level.bandwidth) ? 1 : -1) : -1 )
else
// Sort by bandwidth DESC
this._levels.sort((a, b) => (a.level.bandwidth < b.level.bandwidth) ? 1 : -1)

this.trigger(Events.PLAYBACK_LEVELS_AVAILABLE, this.levels)
}

_startToSendStats () {
Expand Down