Attempt to get dynamic data setup for stream based on format working

This commit is contained in:
Benjamin Southall 2017-05-04 13:48:09 +09:00
parent 423b6e5dd8
commit 5d861879c1

View File

@ -20,6 +20,7 @@ var active_page = "stream";
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
check_status(); check_status();
$('#format').trigger('change');
setInterval(check_status, 15000); setInterval(check_status, 15000);
}); });
@ -45,31 +46,52 @@ if (typeof sd !== 'undefined') {
} }
}); });
} }
function change_format(e) { function change_format(e) {
$(document).ready(function(){ $(document).ready(function(){
let media = document.getElementById("my-video_html5_api"); let media = document.getElementById("my-video");
let paused = media.paused; let paused = media.paused;
format = e.value; format = e.value;
var datasetup;
if(videojs.getPlayers()["my-video"]) {
delete videojs.getPlayers()["my-video"];
}
if (format === "hls"){ if (format === "hls"){
media.src ="{{ settings.hlsurl }}"; datasetup = {"example_option": true, "techOrder": ["html5","flash"],"fluid": true };
media.src.type = "application/x-mpegURL";
} }
else if (format === "ogg"){ else if (format === "ogg"){
media.src = "{{ settings.ogvurl }}"; datasetup = {"example_option": true, "techOrder": ["html5","flash"],"fluid": true };
media.src.type = "video/ogg";
} }
else if (format === "rtmp"){ else if (format === "rtmp"){
media.src = "{{ settings.rtmpvideojsurl }}"; datasetup = {"example_option": true, "techOrder": ["flash"],"fluid": true };
media.src.type = "rtmp/mp4";
} }
videojs('my-video'); var myvideo = videojs("my-video", datasetup , function(){
media.load(); console.log("loaded");
if(!paused) {
media.play(); });
} var myvideo;
if (format === "hls"){
myvideo = $("#my-video_html5_api");
myvideo.src ="{{ settings.hlsurl }}";
myvideo.src.type = "application/vnd.apple.mpegurl";
}
else if (format === "ogg"){
myvideo = $("#my-video_html5_api");
myvideo.src = "{{ settings.ogvurl }}";
myvideo.src.type = "video/ogg";
}
else if (format === "rtmp"){
myvideo = $("#my-video");
myvideo.src = "{{ settings.rtmpvideojsurl }}";
myvideo.src.type = "rtmp/mp4";
}
myvideo.load();
if(!paused) {
myvideo.play();
}
check_status(); check_status();
}); });
@ -89,11 +111,11 @@ function change_format(e) {
<div> <div>
<!-- data-setup='{ "example_option": true, "techOrder": ["html5","flash"],"fluid": true} --> <!-- data-setup='{ "example_option": true, "techOrder": ["html5","flash"],"fluid": true} -->
<div id="box" width="100%"> <div id="box" width="100%">
<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" height="264" width="640" controls preload="auto" poster="https://lainchan.org/static/lain_is_cute_datass_small.png" data-setup='{ "example_option": true, "techOrder": ["html5","flash"],"fluid": true}' > <video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" height="264" width="640" controls preload="auto" poster="https://lainchan.org/static/lain_is_cute_datass_small.png" >
{% set formatlist = settings.formats|split(' ') %} {% set formatlist = settings.formats|split(' ') %}
{% for format in formatlist %} {% for format in formatlist %}
{% if format == "hls" %} {% if format == "hls" %}
<source id="hlssource" src="{{ settings.hlsurl }}" type="application/x-mpegURL"> <source id="hlssource" src="{{ settings.hlsurl }}" type="application/vnd.apple.mpegurl">
{% elseif format == "ogg" %} {% elseif format == "ogg" %}
<source id="oggsource" src="{{ settings.ogvurl }}" type="video/ogg"> <source id="oggsource" src="{{ settings.ogvurl }}" type="video/ogg">
{% elseif format == "rtmp" %} {% elseif format == "rtmp" %}