Ziggeo：如何在ziggeo刻录机V2上隐藏控制面板

Question

我已经使用ziggeo一个星期了，并且发现它非常适合我的直播录制应用程序。 javascript api完美无缺。我能够创建一个记录器，它根据经过的时间使用可调用方法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

Answer 1

您可以通过在页面上添加CSS样式轻松实现。要隐藏按钮（设置，相机和操作按钮），您可以使用此代码

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

如果你想进一步隐藏半透明条（及其子元素），你可以使用它

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

我希望这对你的问题有帮助。请注意，如果您有多个录制内容，这将隐藏页面中的所有控制栏。