Ziggeo : 如何在 ziggeo 记录器 V2 上隐藏控制面板
Posted
技术标签:
【中文标题】Ziggeo : 如何在 ziggeo 记录器 V2 上隐藏控制面板【英文标题】：Ziggeo : How to hide controls panel on the ziggeo recorder V2 【发布时间】：2019-03-31 22:19:23 【问题描述】：我已经使用 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') " 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" 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 xmlns="http://www.w3.org/2000/svg"><g>\n\
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke- 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 隐藏控制面板，但是基于 flash 的呢？你如何从基于闪存的记录器中隐藏它？等待回复...
问候， 乌特卡什
【问题讨论】：
【参考方案1】：您可以通过在页面上添加 CSS 样式轻松实现此目的。要隐藏按钮（设置、相机和操作按钮），您可以使用此代码
div[data-selector="controlbar"]
display: none;
如果你想进一步隐藏半透明栏（它是子元素），你可以使用这个
.ba-videorecorder-theme-modern-dashboard
display: none;
我希望这对您的问题有所帮助。请注意，如果您有多个录音，这将隐藏页面中的所有控制栏。
【讨论】：
感谢您的回答，但这只是基于 HTML 的记录器解决方案。闪存呢？ 闪光灯部分仅显示相机画面。控件是 CSS HTML，就像使用 WebRTC 时一样。 因此您可以在使用 Flash 的刻录机上使用相同的方法。 （对不起，我忘了提到这一点，我无法编辑评论）以上是关于Ziggeo : 如何在 ziggeo 记录器 V2 上隐藏控制面板的主要内容，如果未能解决你的问题，请参考以下文章