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

fix HLS and DASH caption issues #4

Merged
merged 5 commits into from
Jul 8, 2024
Merged

fix HLS and DASH caption issues #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
61b9381
update mediaelement.js to latest release
anarchivist Jun 25, 2024
bcd6a25
add .irb_history to .gitignore
anarchivist Jul 3, 2024
f219b45
change player initialization to fix DASH double captions
anarchivist Jul 2, 2024
e147e30
handle WebVTT captions in HLS manifests
anarchivist Jul 3, 2024
07263a6
remove dead code in track extensions
anarchivist Jul 5, 2024
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
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,3 +396,5 @@ Icon
Network Trash Folder
Temporary Items
.apdisk
.irb_history
.local
1 change: 1 addition & 0 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,7 @@ PLATFORMS
aarch64-linux
arm64-darwin-21
arm64-darwin-22
arm64-darwin-23
x86_64-darwin-19
x86_64-linux

Expand Down
68 changes: 68 additions & 0 deletions app/assets/images/icons/mejs-controls.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions app/assets/stylesheets/includes/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,18 @@ audio {
width: 100%;
}

/// additional MediaElement.js styles

.mejs__overlay-button {
background-image: url("/assets/icons/mejs-controls.svg");
}
.mejs__overlay-loading-bg-img {
background-image: url("/assets/icons/mejs-controls.svg");
}
.mejs__button > button {
background-image: url("/assets/icons/mejs-controls.svg");
}

// ////////////////////////////////////////////////////////////
// Tables

Expand Down
2 changes: 1 addition & 1 deletion app/views/player/_audio.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!--suppress HtmlUnknownAttribute -->
<%# should match app/assets/stylesheets/application.scss %>
<audio id="audio-<%= index %>" width="100%" height="40px" class="mejs__player" preload="<%= preload %>" controls>
<audio id="audio-<%= index %>" width="100%" height="40px" preload="<%= preload %>" controls>
<source src="<%= track.hls_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_HLS %>"/>
</audio>
21 changes: 19 additions & 2 deletions app/views/player/_player_head_additional.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,24 @@
function rewrite_src_tags() {
$("source,track").each(rewrite_src);
}

function initialize_players() {
$("audio,video").mediaelementplayer({
// workaround for mediaelement/mediaelement#2963
// (when the HLS stream contains WebVTT captions)
hls: { enableWebVTT: false },
iconSprite: "/assets/icons/mejs-controls.svg",
success: function (mediaElement, originalNode, instance) {
if (typeof dashjs !== "undefined") {
// workaround for mediaelement/mediaelement#2964
mediaElement.dashPlayer.updateSettings({
streaming: { text: { defaultEnabled: false } },
});
}
}
}
)}
</script>
<script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelement-and-player.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelementplayer.css">
<script src="https://cdn.jsdelivr.net/npm/mediaelement@7.0.5/build/mediaelement-and-player.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@7.0.5/build/mediaelementplayer.css">
<% end %>
1 change: 1 addition & 0 deletions app/views/player/_record.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@

<script>
rewrite_src_tags();
initialize_players();
</script>

<% unless record.description.blank? %>
Expand Down
6 changes: 3 additions & 3 deletions app/views/player/_video.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<%# TODO: figure out how to programmatically set height with JavaScript, or something %>
<%# should match app/assets/stylesheets/application.scss %>
<video id="video-<%= index %>" width="100%" height="270" class="mejs__player" preload="<%= preload %>" controls>
<video id="video-<%= index %>" width="100%" height="270" preload="<%= preload %>" controls crossorigin="anonymous">
<% if browser.platform.ios? || browser.device.ipad? %>
<source src="<%= track.hls_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_HLS %>"/>
<%# a separate track tag is not necessary here for captions as Wowza sends them as part of the HLS stream, and iOS will auto discover them %>
<% else %>
<source src="<%= track.mpeg_dash_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_MPEG_DASH %>"/>
<% if (dash_vtt_uri = track.dash_vtt_uri) %>
<%# TODO: should we also be adding a caption track for HLS streaming to iPhone/iPad? %>
<track default kind="captions" srclang="en" src="<%= dash_vtt_uri %>"/>
<track kind="captions" srclang="en" src="<%= dash_vtt_uri %>"/>
<% end %>
<% end %>
</video>
Loading