Ziggeo: Как скрыть панель управления на Ziggeo Recorder V2 - PullRequest
Новая
       39

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

0 голосов
/ 27 октября 2018

Я пользуюсь ziggeo уже неделю и считаю, что он идеально подходит для моего приложения для записи в прямом эфире. API Java работает отлично. Мне удалось создать рекордер, который запускает и останавливает запись, используя вызываемые методы 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, но как насчет флэш-памяти? Как вы прячете его от флэш-рекордера? Ожидание ответа ...

С уважением, Utkarsh

1 Ответ

0 голосов
/ 27 октября 2018

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

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

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

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

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

...