test
This commit is contained in:
68
lib/framework/templates/base.html
Normal file
68
lib/framework/templates/base.html
Normal file
@@ -0,0 +1,68 @@
|
||||
{% from "macro_menu.html" import menu, menu_module, menu_page with context %}
|
||||
{% from "macro_include.html" import apply_theme, modals with context %}
|
||||
{% import "macro.html" as macros %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="ko">
|
||||
{% block head %}
|
||||
<title>{{get_web_title()}}</title>
|
||||
{% endblock %}
|
||||
<meta name="google" value="notranslate">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
|
||||
|
||||
|
||||
<!--
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
-->
|
||||
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
|
||||
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
|
||||
{% set theme = get_theme() %}
|
||||
<link href="{{ url_for('static', filename='css/theme/'+theme+'_bootstrap.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/animate.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
|
||||
<link href="https://unpkg.com/balloon-css/balloon.min.css" rel="stylesheet">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<!--<script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>-->
|
||||
|
||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/bootstrap-notify.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/sjva_ui14.js') }}"></script>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/ff_common1.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/ff_ui1.js') }}"></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.6/socket.io.js"></script>
|
||||
<!-- 토글 -->
|
||||
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.4.0/js/bootstrap4-toggle.min.js"></script>
|
||||
<!-- end 토글 -->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="body ">
|
||||
{{ menu() }}
|
||||
{{ menu_module() }}
|
||||
|
||||
<!--</nav>-->
|
||||
<main id="main_container" role="main" class="container">
|
||||
<div class="d-inline-block"></div>
|
||||
{{ menu_page() }}
|
||||
<div>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</main>
|
||||
<div class="loading" id="loading">
|
||||
<img src="/static/img/loading.gif" />
|
||||
</div>
|
||||
{{ modals() }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- 글로벌 버튼이 모두 나오고 처리-->
|
||||
<script src="{{ url_for('static', filename='js/sjva_global1.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/ff_global1.js') }}"></script>
|
||||
81
lib/framework/templates/log.html
Normal file
81
lib/framework/templates/log.html
Normal file
@@ -0,0 +1,81 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div>
|
||||
<nav>
|
||||
{{ macros.m_tab_head_start() }}
|
||||
{{ macros.m_tab_head('이전', true) }}
|
||||
{{ macros.m_tab_head('실시간', false) }}
|
||||
{{ macros.m_tab_head_end() }}
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
{{ macros.m_tab_content_start('이전', true) }}
|
||||
<div>
|
||||
<textarea id="log" class="col-md-12" rows="30" charswidth="23" disabled style="background-color:#ffffff;visibility:hidden"></textarea>
|
||||
</div>
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
{{ macros.m_tab_content_start('실시간', false) }}
|
||||
<div>
|
||||
<textarea id="add" class="col-md-12" rows="30" charswidth="23" disabled style="background-color:#ffffff;visibility:visible"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-inline">
|
||||
<label class="form-check-label" for="auto_scroll">자동 스크롤</label>
|
||||
<input id="auto_scroll" name="auto_scroll" class="form-control form-control-sm" type="checkbox" data-toggle="toggle" checked>
|
||||
<span class='text-left' style="padding-left:25px; padding-top:0px">
|
||||
<button id="clear" class="btn btn-sm btn-outline-success">리셋</button>
|
||||
</span>
|
||||
</div>
|
||||
{{ macros.m_tab_content_end() }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
setWide();
|
||||
$('#loading').show();
|
||||
ResizeTextArea()
|
||||
})
|
||||
|
||||
function ResizeTextArea() {
|
||||
ClientHeight = window.innerHeight
|
||||
$("#log").height(ClientHeight-240);
|
||||
$("#add").height(ClientHeight-260);
|
||||
}
|
||||
|
||||
$(window).resize(function() {
|
||||
ResizeTextArea();
|
||||
});
|
||||
|
||||
|
||||
var protocol = window.location.protocol;
|
||||
var socket = io.connect(protocol + "//" + document.domain + ":" + location.port + "/log");
|
||||
socket.emit("start", {'package':'{{package}}'} );
|
||||
socket.on('on_start', function(data){
|
||||
document.getElementById("log").innerHTML += data.data;
|
||||
document.getElementById("log").scrollTop = document.getElementById("log").scrollHeight;
|
||||
document.getElementById("log").style.visibility = 'visible';
|
||||
$('#loading').hide();
|
||||
});
|
||||
|
||||
socket.on('add', function(data){
|
||||
if (data.package == "{{package}}") {
|
||||
var chk = $('#auto_scroll').is(":checked");
|
||||
document.getElementById("add").innerHTML += data.data;
|
||||
if (chk) document.getElementById("add").scrollTop = document.getElementById("add").scrollHeight;
|
||||
}
|
||||
});
|
||||
|
||||
$("#clear").click(function(e) {
|
||||
e.preventDefault();
|
||||
document.getElementById("add").innerHTML = '';
|
||||
});
|
||||
|
||||
$("#auto_scroll").click(function(){
|
||||
var chk = $(this).is(":checked");//.attr('checked');
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
1009
lib/framework/templates/macro.html
Normal file
1009
lib/framework/templates/macro.html
Normal file
File diff suppressed because it is too large
Load Diff
125
lib/framework/templates/macro_include.html
Normal file
125
lib/framework/templates/macro_include.html
Normal file
@@ -0,0 +1,125 @@
|
||||
{% import "macro.html" as macros %}
|
||||
|
||||
|
||||
|
||||
{% macro modals() %}
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="large_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modal_title"></h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div class="modal-body" id="modal_body" style="word-break:break-all;">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
|
||||
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="normal_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="normal_modal_title"></h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div class="modal-body" id="normal_modal_body" style="word-break:break-all;">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
|
||||
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="confirm_modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 id="confirm_title" class="modal-title">Modal title</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="confirm_body" class="modal-body">
|
||||
<p>Modal body text goes here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="confirm_button" type="button" class="btn btn-primary" data-dismiss="modal">확인</button>
|
||||
<button id="confirm_cancel_button" type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 경로 선택 모달 -->
|
||||
<div class="modal fade" id="select_local_file_modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="select_local_file_modal_title">경로 선택</h4>
|
||||
</div>
|
||||
<div class="modal-body" id="modal_body" style="word-break: break-all;">
|
||||
<div class="row" style="padding-top: 10px; padding-bottom:10px; align-items: center;">
|
||||
<div class="col-sm-1 set-left"><strong>Path</strong></div>
|
||||
<div class="col-sm-11">
|
||||
<div class="input-group col-sm-12">
|
||||
<input id="select_local_file_modal_path" name="select_local_file_modal_path" type="text" class="form-control form-control-sm" value="/">
|
||||
<div class="btn-group btn-group-sm flex-wrap mr-2" role="group" style="padding-left:5px; padding-top:0px">
|
||||
<button id="global_select_local_file_load_btn" class="btn btn-sm btn-outline-success">Load</button>
|
||||
<button type="button" id='select_local_file_modal_confirm_btn' class="btn btn-success" data-dismiss="modal">선택
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-left:20px; padding-top:5px;"><em>입력한 경로를 불러옵니다.</em></div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="select_local_file_modal_only_dir" value="true" />
|
||||
<input type="hidden" id="select_local_file_modal_callback" value="" />
|
||||
<div class="list-group" id="select_local_file_modal_list_group">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" id='select_local_file_modal_confirm_btn' class="btn btn-success" data-dismiss="modal">선택
|
||||
</button>
|
||||
<button type="button" id='select_local_file_modal_cancel_btn' class="btn btn-default" data-dismiss="modal">닫기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 예고편 Player Modal: START -->
|
||||
<div class="modal fade" id="video_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="video_modal_title" style="word-break:break-all;">예고편 재생: </h4>
|
||||
</div>
|
||||
<div class="modal-body" id="modal_body" style="word-break:break-all;">
|
||||
<span id="video_player_body"></span>
|
||||
</div>
|
||||
<!--</div>-->
|
||||
<div class="modal-footer">
|
||||
<button type="button" id='video_close_btn' class="btn btn-default" data-dismiss="modal">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 예고편 Player Modal: END -->
|
||||
|
||||
|
||||
<!--command modal-->
|
||||
{{ macros.m_modal_start('command_modal', '', 'modal-lg') }}
|
||||
<div>
|
||||
<textarea id="command_modal_textarea" class="col-md-12" rows="30" disabled style="visibility:visible"></textarea>
|
||||
</div>
|
||||
{{ macros.m_modal_end() }}
|
||||
<!--command modal end-->
|
||||
<!-- Modal end -->
|
||||
{% endmacro %}
|
||||
|
||||
144
lib/framework/templates/macro_menu.html
Normal file
144
lib/framework/templates/macro_menu.html
Normal file
@@ -0,0 +1,144 @@
|
||||
{% macro menu() %}
|
||||
<div id="menu_div">
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark flex-md-nowrap shadow" role="navigation">
|
||||
<a class="navbar-brand" href="/">{{get_web_title()}}</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
{% for i in range(1) %}
|
||||
<div class="collapse navbar-collapse w-100" id="navbarsExample01">
|
||||
{% if i == 0 %}
|
||||
<ul class="nav navbar-nav mr-auto">
|
||||
{% else %}
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
{% endif %}
|
||||
|
||||
{% set menu = request.full_path | get_menu %}
|
||||
{% set menu_map = get_menu_map() %}
|
||||
{% for category in menu_map %}
|
||||
{% if 'uri' in category and category['uri'].startswith('http') %}
|
||||
<li class="nav-item"> <a class="nav-link" href="{{ category['uri']}}" target="_blank">{{category['name']}}</a></li>
|
||||
{% else %}
|
||||
|
||||
<!--{{ category }}-->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{category['name']}}</a>
|
||||
|
||||
<ul class="dropdown-menu">
|
||||
|
||||
{% for category_child in category['list'] %}
|
||||
{% if category_child['uri'] == 'setting' %}
|
||||
<li><a class="dropdown-item" href="#" style="font-size: .850rem; font-weight:bold">{{category_child['name']}}</a>
|
||||
<ul class="submenu dropdown-menu">
|
||||
{% for item in category_child['list'] %}
|
||||
<li><a class="dropdown-item" href="/{{item['uri']}}" style="font-size: .850rem; font-weight:bold">{{item['name']}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
{% elif category_child['uri'] == '-' %}
|
||||
<div class="dropdown-divider"></div>
|
||||
{% elif 'uri' in category_child and category_child['uri'].startswith('http') %}
|
||||
{% if 'target' not in category_child or category_child['target'] == '_blank' %}
|
||||
<a class="dropdown-item" href="{{ category_child['uri'] }}" target="_blank" style="font-size: .850rem; font-weight:bold">{{ category_child['name'] }}</a>
|
||||
{% else %}
|
||||
<a class="dropdown-item" href="{{ category_child['uri'] }}" style="font-size: .850rem; font-weight:bold">{{ category_child['name'] }}</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if category_child['uri'] == menu[0] %}
|
||||
<a class="dropdown-item active" href="/{{ category_child['uri'] }}" style="font-size: .850rem; font-weight:bold">{{ category_child['name'] }}</a>
|
||||
{% else %}
|
||||
<a class="dropdown-item" href="/{{ category_child['uri'] }}" style="font-size: .850rem; font-weight:bold">{{ category_child['name'] }}</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}<!---->
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% macro menu_module() %}
|
||||
<div id='menu_module_div'>
|
||||
{% set current_menu = request.full_path | get_menu %}
|
||||
<!--{{ current_menu }}-->
|
||||
{% set menu_map = get_menu_map() %}
|
||||
{% for category in menu_map %}
|
||||
{% for category_child in category['list'] %}
|
||||
{% if current_menu[0] == category_child['uri'] %}
|
||||
<ul class="nav nav-pills bg-light shadow text-dark" >
|
||||
<li class="nav-item"><span class="nav-link">{{category['name']}} ➤ {{category_child['name']}}</span></li>
|
||||
{% for module in category_child['list'] %}
|
||||
<!--{{ module }}-->
|
||||
{% if current_menu[0] == 'setting' %}
|
||||
{% if current_menu[1] == module['uri'] or (current_menu[2] is not none and current_menu[1] + "/" + current_menu[2] == module['uri']) %}
|
||||
<li class="nav-item"><a class="nav-link active" href="/{{module['uri']}}">{{module['name']}}</a></li>
|
||||
{% else %}
|
||||
<li class="nav-item"><a class="nav-link" href="/{{module['uri']}}">{{module['name']}}</a></li>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if current_menu[1] == module['uri'] or (current_menu[2] is not none and current_menu[1] + "/" + current_menu[2] == module['uri']) %}
|
||||
<li class="nav-item"><a class="nav-link active" href="/{{current_menu[0]}}/{{module['uri']}}">{{module['name']}}</a></li>
|
||||
{% else %}
|
||||
<li class="nav-item"><a class="nav-link" href="/{{current_menu[0]}}/{{module['uri']}}">{{module['name']}}</a></li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% macro menu_page() %}
|
||||
<div id='menu_page_div'>
|
||||
{% set current_menu = request.full_path | get_menu %}
|
||||
{% set menu_map = get_menu_map() %}
|
||||
{% for category in menu_map %}
|
||||
{% for plugin in category['list'] %}
|
||||
{% if current_menu[0] == plugin['uri'] and 'list' in plugin %}
|
||||
{% for module in plugin['list'] %}
|
||||
{% if module['uri'] == current_menu[1] and 'list' in module%}
|
||||
<!--{{ module }}-->
|
||||
<ul class="nav nav-pills bg-light shadow text-dark">
|
||||
{% for page in module['list'] %}
|
||||
{% if current_menu[2] == page['uri'] %}
|
||||
<li class="nav-item"><a class="nav-link active" href="/{{ current_menu[0] }}/{{ current_menu[1] }}/{{ page['uri'] }}">{{page['name']}}</a></li>
|
||||
{% else %}
|
||||
<li class="nav-item"><a class="nav-link" href="/{{ current_menu[0] }}/{{ current_menu[1] }}/{{ page['uri'] }}">{{page['name']}}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="d-inline-block"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
30
lib/framework/templates/manual.html
Normal file
30
lib/framework/templates/manual.html
Normal file
@@ -0,0 +1,30 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
|
||||
{% filter markdown %}
|
||||
{{ data }}
|
||||
{% endfilter %}
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
img{
|
||||
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="md_div" data-url="{{ arg }}"></div>
|
||||
<div id="content_div" data-url="{{ arg }}"></div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
//$('#main_container').attr('class', 'container-fluid');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
6
lib/framework/templates/sample.html
Normal file
6
lib/framework/templates/sample.html
Normal file
@@ -0,0 +1,6 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="">
|
||||
<h3>{{title}}</h3>
|
||||
</div>
|
||||
{% endblock %}
|
||||
65
lib/framework/templates/videojs.html
Normal file
65
lib/framework/templates/videojs.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<title>{{data['play_title']}}</title>
|
||||
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
|
||||
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
|
||||
|
||||
<body bgcolor='black'>
|
||||
<video id=player width=960 height=540 class="video-js vjs-default-skin vjs-16-9" autoplay controls>
|
||||
<source
|
||||
src="{{data['play_source_src']}}"
|
||||
type="{{data['play_source_type']}}" />
|
||||
</video>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var subtitle_src = "{{data['play_subtitle_src']}}";
|
||||
let options = {
|
||||
html5: {
|
||||
nativeTextTracks: false
|
||||
},
|
||||
playbackRates: [.5, .75, 1, 1.5, 2],
|
||||
controls: true,
|
||||
preload: "auto",
|
||||
controlBar: {
|
||||
playToggle: false,
|
||||
pictureInPictureToggle: false,
|
||||
remainingTimeDisplay: true,
|
||||
qualitySelector: true,
|
||||
}
|
||||
};
|
||||
let player = videojs('player', options);
|
||||
|
||||
player.ready(function(){
|
||||
// set subtitle track
|
||||
console.log(subtitle_src);
|
||||
if (subtitle_src != "") {
|
||||
var suburl = subtitle_src.replace(/&/g, '&');
|
||||
console.log(suburl);
|
||||
let captionOption = {
|
||||
kind: 'captions',
|
||||
srclang: 'ko',
|
||||
label: 'Korean',
|
||||
src: suburl,
|
||||
mode: 'showing'
|
||||
};
|
||||
player.addRemoteTextTrack(captionOption);
|
||||
|
||||
var settings = this.textTrackSettings;
|
||||
settings.setValues({
|
||||
"backgroundColor": "#000",
|
||||
"backgroundOpacity": "0",
|
||||
"edgeStyle": "uniform",
|
||||
});
|
||||
settings.updateDisplay();
|
||||
}
|
||||
else {
|
||||
var tracks = player.textTracks();
|
||||
console.log(tracks.length);
|
||||
for (var i = 0; i < tracks.length; i++) {
|
||||
var track = tracks[i];
|
||||
console.log(track);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
player.play();
|
||||
</script>
|
||||
Reference in New Issue
Block a user