Ziggeo: Как скрыть панель управления на рекордере Ziggeo V2

Я использую ziggeo уже неделю и считаю, что он идеально подходит для моего приложения для записи прямых трансляций. API-интерфейс javascript работает отлично. Мне удалось создать рекордер, который запускает и останавливает запись, используя вызываемые методы embedding.record () и embedding.stop () в зависимости от прошедшего времени. Пока работает отлично. Однако я не могу найти какой-либо параметр внедрения, который скрывает панель управления (с настройками, кнопками записи и т. д.), Отображаемую на рекордере V2. Вот мой код

{% extends 'TraceBundle::layout.html.twig' %}

{% block stylesheets %} 
    {{ parent() }}
    <link href = "{{ asset('bundles/trace/css/loader.css') }}" type = "text/css" rel = "stylesheet" />
    <link rel = "stylesheet" href = "//assets-cdn.ziggeo.com/v1-stable/ziggeo.css" />
      <style>
      .navbar-default .navbar-nav > li > a {
    color:#337ab7;
}
</style>
{% endblock %}

{% block content %}
    <nav id = "topnav" class = "navbar navbar-default" role = "navigation">
        <div class = "container">
            <div class = "navbar-header">
                <a href = "#"><img id = "brand-logo" src = "{{ asset('bundles/trace/img/logo-epita.png') }}" width = "50" height = "50" alt = "easyRECrue" title = "easyRECrue" /></a>
            </div>

            <div id = "navbar-links-collapse" class = "collapse navbar-collapse text-center">
                <ul class = "nav navbar-nav navbar-center">
                    <li>
                        <a>Step 2/4: Practice</a>
                    </li>  
                </ul>

                <ul class = "nav navbar-nav navbar-right">
                    <li>
                        <a>{{campaign.campaigntitle}}</a>
                    </li>    
                </ul>
            </div>
        </div>
    </nav>

    <div class = "container">
    <div id = "practice-question" data-applicant-id = "{{applicant.id}}" data-random-string = "{{randomstring}}">    
        <div class = "row text-center">
            <h3>To Practice, tell us if this is your first video interview and what you think about it.</h3>
        </div>

        <div class = "row text-center">
            <div class = "video-div">    
                <video id = "myVideo" width = "640" height = "480" controls>
                    <source src = "{{asset('bundles/trace/vid/mov_bbb.mp4')}}" type = "video/mp4">
                </video>  
            </div>
            <p id = "info"><b>!</b>This answer will not be sent to the recruiter</p>    
            <p id = "save-warning" class = "hidden" style = "color:red">Your recording is getting saved, Please do not hit back or refresh..</p>

            <div class = "row text-center" id = "hdfvr-content"></div>

            <div id = "thinktime" style = "margin-top:-310px;"> </div>    
            <br>     
            <br>     
            <br>     
            <br>     
            <br>     
            <br>     
            <button class = "btn btn-primary answer-now" type = "button" value = "answernow" data-timeleft = "">Answer now</button>
            <div id = "input-widget">
{#                <br>#}
                <form method = "post" id = "response" action = "{{ path('practicequestionpage',{'uniquecode': uniquecode}) }}">
                <progress value = "0" max = "30" id = "progressBar"></progress>
                <br>
                <br>
                <button class = "btn btn-primary finished-answering hidden" type = "button" value = "finished">I've finished answering</button>
                <button class = "btn btn-primary submit hidden" type = "submit" name = "submit" value = "submit" onClick = "removePipeRecorder();">Question answered, continue the process</button>
                </form>
            </div>    
        </div>
    </div>
    </div>
{% endblock %}      

{% block javascripts %}
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src = "//assets-cdn.ziggeo.com/v1-stable/ziggeo.js"></script>
    <script>ZiggeoApi.token = "r1a6fc911cd4e27b99d4c992e1e1d3b3";</script>
    <script>
        $(document).ready(function () {
            ZiggeoApi.Events.on("system_ready", function() {
            var embedding = new ZiggeoApi.V2.Recorder({
            element: document.getElementById("hdfvr-content"),
            attrs: {
                width: 320,
                height: 240,
                theme: "modern",
                themecolor: "red",
                skipinitial: "true",
                limit: 30,
                countdown: 0,
                localplayback: "false",
                //max take
                recordings: 1,
                picksnapshots: "false"
            }
        });

            $('#input-widget').hide();
            $('#hdfvr-content').hide();
            $('#info').hide();

            var timeLeft = 30;
            var elem = document.getElementById('thinktime');
            var lefttime = 30;
            var maxduration = 30;
            var minduration = 10;
            // loader(circle) variables
            var time = 30;
            var initialOffset = '440';
            var i = 1;
            // remove video pause button
            var video = document.getElementById("myVideo");
            if (video){
            $('video').one('play', function () {
               video.removeAttribute("controls");  
            }); 

            $('#thinktime').hide();
            $('.answer-now').hide(); 

            document.getElementById('myVideo').addEventListener('ended',myHandler,false);  
            }else{ 
            timerId = setInterval(countdown, 1000);
            $('.answer-now').show();    
            loader(time,initialOffset,i);
            }

            function myHandler() {
                embedding.activate();
                $("#myVideo").remove();   
                $('#thinktime').show();
                $('#hdfvr-content').show();
                $('#info').show();
                $('.answer-now').show();
                timerId = setInterval(countdown, 1000);
                loader(time,initialOffset,i);
            }

            // loader
            function loader(time,initialOffset,i){ 
            /* Need initial run as interval hasn't yet occured... */
            $('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/timeLeft)));

            var interval = setInterval(function() {
                    $('h2').text(i);
                    if (i == time) {    
                      clearInterval(interval);
                      return;
                    }
                    $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
                    i++;  
                }, 1000);
            elem.innerHTML = '<div class = "item html"><h2>0</h2><svg width = "160" height = "160" xmlns = "http://www.w3.org/2000/svg"><g>\n\
                <circle id = "circle" class = "circle_animation" r = "69.85699" cy = "81" cx = "81" stroke-width = "8" stroke = "#6fdb6f" fill = "none">'
                '</circle></g></svg></div>';
            }

            function countdown() {
              $('.answer-now').click(function(){
                 $(this).data('clicked', true);
                });
              if (timeLeft == 0 || $('.answer-now').data('clicked')) {               
                clearTimeout(timerId);
                embedding.record();
                $('#input-widget').show();
                $('#thinktime').hide();
                $('.answer-now').hide();
                var downloadTimer = setInterval(function(){
                document.getElementById("progressBar").value = lefttime;
                lefttime--;

                if (lefttime == (maxduration-minduration)){
                    $('.finished-answering').removeClass('hidden');
                    $('.finished-answering').click(function () {
                        clearInterval(downloadTimer);
                        embedding.stop();
                        $('#hdfvr-content').find("[data-selector='recorder-player']").css('margin-left','442px');
                        $('.record-icon').remove();
                        $('#save-warning').removeClass('hidden');
                        $('.finished-answering').addClass('hidden');
                        $('#progressBar').hide();
                    });
                }
                if (lefttime == 0){
                  clearInterval(downloadTimer);
                    embedding.stop();
                    $('#hdfvr-content').find("[data-selector='recorder-player']").css('margin-left','442px');
                    $('.record-icon').remove();
                    $('#save-warning').removeClass('hidden');
                  $('#progressBar').hide();
                  $('.finished-answering').addClass('hidden');
                  }
              },1000);
              } else {                                               
              //  elem.innerHTML = '<h1>'+timeLeft+'</h1>';
                timeLeft--;
                $('.answer-now').data('timeleft', timeLeft);

              }
            } 
            //hide/show input widget ends here

            embedding.on("recording", function () {
                $("#hdfvr-content").append('<span style = "color:red; margin:175px 0px 0px -25px; position:absolute;" class = "record-icon glyphicon glyphicon-record"></span>');
            });   

            embedding.on("uploaded", function () {
                $('#save-warning').addClass('hidden');
                $('.submit').removeClass('hidden');
            });
        });
    });
    </script>
{% endblock %}

Я понимаю, что для рекордера на основе HTML может быть способ скрыть панель управления с помощью CSS, но как насчет флэш-памяти? Как это скрыть от флеш-рекордера? Ожидание ответа...

С уважением, Уткарш

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
406
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете легко добиться этого, добавив на страницу стиль CSS. Чтобы скрыть кнопки (настройки, камера и кнопка действия), вы можете использовать этот код

div[data-selector = "controlbar"] {
    display: none;
}

И если вы хотите еще больше скрыть полупрозрачную полосу (и ее дочерний элемент), вы можете использовать это

.ba-videorecorder-theme-modern-dashboard {
    display: none;
}

Надеюсь, это поможет с вашим вопросом. Обратите внимание, что это скроет всю панель управления на странице, если у вас есть более одной записи.

спасибо за ответ, но это единственное решение для записи на основе HTML. А как насчет вспышки?

utkarsh2k2 28.10.2018 14:21

Часть вспышки отображает только изображение с камеры. Элемент управления - это CSS HTML, как и при использовании WebRTC.

Ibnu Triyono 28.10.2018 14:31

Таким образом, вы можете использовать тот же метод на рекордере, который использует Flash. (Извините, я забыл упомянуть об этом, и я не могу редактировать комментарий)

Ibnu Triyono 28.10.2018 17:01

Другие вопросы по теме