-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implemented HLS stream source as new plugin type.
Also implemented show_controls and autoplay attributes on the video element. These are particularly useful when showing a live stream.
- Loading branch information
1 parent
22fef2c
commit 605e6ad
Showing
6 changed files
with
171 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# Generated by Django 5.0.9 on 2024-11-30 13:11 | ||
|
||
import django.db.models.deletion | ||
from django.db import migrations, models | ||
|
||
|
||
class Migration(migrations.Migration): | ||
|
||
dependencies = [ | ||
('cms', '0035_auto_20230822_2208_squashed_0036_auto_20240311_1028'), | ||
('djangocms_video', '0011_alter_videoplayer_cmsplugin_ptr_and_more'), | ||
] | ||
|
||
operations = [ | ||
migrations.CreateModel( | ||
name='HlsStreamSource', | ||
fields=[ | ||
('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, related_name='%(app_label)s_%(class)s', serialize=False, to='cms.cmsplugin')), | ||
('hls_source_url', models.CharField(max_length=1024, verbose_name='HLS Source URL')), | ||
], | ||
bases=('cms.cmsplugin',), | ||
), | ||
] |
23 changes: 23 additions & 0 deletions
23
djangocms_video/migrations/0013_videoplayer_autoplay_videoplayer_show_controls.py
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# Generated by Django 5.0.9 on 2024-11-30 14:56 | ||
|
||
from django.db import migrations, models | ||
|
||
|
||
class Migration(migrations.Migration): | ||
|
||
dependencies = [ | ||
('djangocms_video', '0012_hlsstreamsource'), | ||
] | ||
|
||
operations = [ | ||
migrations.AddField( | ||
model_name='videoplayer', | ||
name='autoplay', | ||
field=models.BooleanField(default=False, help_text='If enabled, the video will automatically play once the page is loaded. This might not work depending on how the user has configured their browser.', verbose_name='Autoplay'), | ||
), | ||
migrations.AddField( | ||
model_name='videoplayer', | ||
name='show_controls', | ||
field=models.BooleanField(default=True, help_text='If enabled, the video will be shown with Play, Pause and Seek elements that allow the user to control playback.', verbose_name='Show controls'), | ||
), | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
djangocms_video/templates/djangocms_video/default/hls_stream_source.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
{% load i18n cms_tags sekizai_tags %} | ||
|
||
{% if not disabled %} | ||
{% with instance.hls_source_url as url %} | ||
<source id="{{ source_id }}" src="{{ url }}" type="application/x-mpegURL" {{ instance.attributes_str }}> | ||
{% endwith %} | ||
{% endif %} | ||
|
||
{% addtoblock "js" %} | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js "></script> | ||
<script> | ||
// Find first source ending in a .m3u8 path and return its url | ||
function getHlsUrl(videoElement) { | ||
const sources = videoElement.querySelectorAll("source"); | ||
for (source of sources) { | ||
if (source.src.endsWith("m3u8")) { | ||
return source.src; | ||
} | ||
} | ||
return null; | ||
} | ||
|
||
function attachHlsStream(sourceElement) { | ||
if (Hls.isSupported()) { | ||
let video = sourceElement.parentElement; | ||
let hls = new Hls(); | ||
let hlsUrl = getHlsUrl(video); | ||
hls.loadSource(hlsUrl); | ||
hls.attachMedia(video); | ||
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { | ||
console.log('manifest loaded, found ' + data.levels.length + ' quality level',); | ||
video.play(); | ||
}); | ||
|
||
hls.on(Hls.Events.ERROR, function (event, data) { | ||
if (data.fatal) { | ||
switch (data.type) { | ||
case Hls.ErrorTypes.MEDIA_ERROR: | ||
console.error('fatal media error encountered, try to recover'); | ||
hls.recoverMediaError(); | ||
break; | ||
case Hls.ErrorTypes.NETWORK_ERROR: | ||
console.error('fatal network error encountered', data); | ||
break; | ||
default: | ||
hls.destroy(); | ||
break; | ||
} | ||
} | ||
}); | ||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) { | ||
video.src = hlsUrl; | ||
video.addEventListener('loadedmetadata', () => { | ||
video.play(); | ||
}); | ||
} else { | ||
console.error('HLS is not supported on this browser.'); | ||
} | ||
} | ||
|
||
attachHlsStream(document.getElementById('{{ source_id }}')); | ||
|
||
</script> | ||
{% endaddtoblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters