Browse Source

Bug 20783: Use iframe to embed Youtube videos

WWW::YouTube::Download is broken and not reliable.
Other alternative was to use HTML::Video::Embed but not updated since
years.

The best alternative seems to follow youtube advise and use an iframe
https://developers.google.com/youtube/iframe_api_reference

Test plan:
Put youtube video in 856$u (using different url formats, youtu.be,
youtube.com/embed, etc.)
Enable HTML5MediaEnabled and HTML5MediaYouTube and confirm that the
youtube videos are correctly embeded.

Signed-off-by: Kelly McElligott <kelly@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
20.11.x
Jonathan Druart 1 year ago
parent
commit
2d7e08bc0e
  1. 29
      C4/HTML5Media.pm
  2. 15
      koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt

29
C4/HTML5Media.pm

@ -51,7 +51,7 @@ sub gethtml5media {
my $HTML5MediaYouTube = C4::Context->preference("HTML5MediaYouTube");
my $marcflavour = C4::Context->preference("marcflavour");
foreach my $HTML5Media_field (@HTML5Media_fields) {
my $isyoutube = 0;
my $is_youtube = 0;
my %HTML5Media;
# protocol
if ( $HTML5Media_field->indicator(1) eq '1' ) {
@ -100,18 +100,14 @@ sub gethtml5media {
$HTML5Media{srcblock} = $HTML5Media_field->subfield('u');
if (grep /youtu\.?be/, $HTML5Media_field->subfield('u') ) {
if ($HTML5MediaYouTube == 1) {
require WWW::YouTube::Download;
import WWW::YouTube::Download qw(playback_url);
my $youtube = WWW::YouTube::Download->new;
eval {
$HTML5Media{srcblock} = $youtube->playback_url(
$HTML5Media_field->subfield('u'), {
'fmt' => '43' #webm is the only format compatible to all modern browsers. maybe check for available qualities
}
);
};
if ($@) { warn $@; }
else { $isyoutube = 1;}
my $url = $HTML5Media_field->subfield('u');
# Credit for regex goes to https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url
next unless $url =~ m{^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*};
my $video_id = $2;
next unless length($video_id) == 11; # Youtube video ids are 11 chars length
$HTML5Media{srcblock} = sprintf '%s://www.youtube.com/embed/%s', $HTML5Media{protocol}, $video_id;
$HTML5Media{is_youtube} = 1;
$is_youtube = 1;
}
else {
next; # do not embed youtube videos
@ -145,12 +141,13 @@ sub gethtml5media {
else {
$HTML5Media{extension} = ($HTML5Media{srcblock} =~ m/([^.]+)$/)[0];
}
if ( ( !grep /\Q$HTML5Media{extension}\E/, @HTML5MediaExtensions ) && ( $isyoutube != 1) ) {
if ( ( !grep /\Q$HTML5Media{extension}\E/, @HTML5MediaExtensions ) && ( $is_youtube != 1) ) {
next; # not a specified media file
}
# youtube
if ($isyoutube == 1) {
$HTML5Media{mime} = 'video/webm';
if ($is_youtube == 1) {
$HTML5Media{mime} = 'video/webm';
$HTML5Media{type} = 'video';
}
# mime
if ( $HTML5Media_field->subfield('c') ) {

15
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt

@ -195,7 +195,7 @@
</li>
[% END %]
[% END %]
[% IF ( HTML5MediaEnabled ) %][% IF ( HTML5MediaSets ) %]<li id="media_tab"><a href="#html5media">Play media</a></li>[% END %][% END %]
[% IF HTML5MediaEnabled && HTML5MediaSets.size %]<li id="media_tab"><a href="#html5media">Play media</a></li>[% END %]
[% IF ( Koha.Preference('NovelistSelectStaffEnabled') && Koha.Preference('NovelistSelectStaffProfile') && Koha.Preference('NovelistSelectStaffView') == 'tab' ) %]
<li class="NovelistSelect" style="display:none;"><a href="#NovelistSelect">NoveList Select</a></li>
[% END %]
@ -820,10 +820,15 @@ Note that permanent location is a code, and location may be an authval.
<div id="html5media">
[% FOREACH HTML5MediaSet IN HTML5MediaSets %]
<p>
<[% HTML5MediaParent | html %] controls preload=none>
<[% HTML5MediaSet.child | html %] src="[% HTML5MediaSet.srcblock | html %]"[% HTML5MediaSet.typeblock | html %] />
[[% HTML5MediaParent | html %] tag not supported by your browser.]
</[% HTML5MediaParent | html %]>
[% IF HTML5MediaSet.is_youtube %]
<iframe id="player" type="text/html" width="640" height="360"
src="[% HTML5MediaSet.srcblock %]" frameborder="0"></iframe>
[% ELSE %]
<[% HTML5MediaParent | html %] controls preload=none>
<[% HTML5MediaSet.child | html %] src="[% HTML5MediaSet.srcblock | url %]"[% HTML5MediaSet.typeblock | html %] />
[[% HTML5MediaParent | html %] tag not supported by your browser.]
</[% HTML5MediaParent | html %]>
[% END %]
</p>
[% END %]
</div>

Loading…
Cancel
Save