Ziggeo : 如何隐藏 ziggeo 录音机 V2 上的控制面板
Ziggeo : How to hide controls panel on the ziggeo recorder V2
我已经使用 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 隐藏控制面板，但是基于 flash 的呢？你如何从基于闪存的记录器中隐藏它？等待回复...
此致，
乌特卡什
您可以通过在页面上添加 CSS 样式轻松实现。要隐藏按钮（设置、相机和操作按钮），您可以使用此代码
div[data-selector="controlbar"] {
display: none;
}
如果你想进一步隐藏半透明栏（及其子元素），你可以使用这个
.ba-videorecorder-theme-modern-dashboard {
display: none;
}
希望对您的问题有所帮助。请注意，如果您有多个录音，这将隐藏页面中的所有控制栏。
我已经使用 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 隐藏控制面板，但是基于 flash 的呢？你如何从基于闪存的记录器中隐藏它？等待回复...
此致， 乌特卡什
您可以通过在页面上添加 CSS 样式轻松实现。要隐藏按钮（设置、相机和操作按钮），您可以使用此代码
div[data-selector="controlbar"] {
display: none;
}
如果你想进一步隐藏半透明栏（及其子元素），你可以使用这个
.ba-videorecorder-theme-modern-dashboard {
display: none;
}
希望对您的问题有所帮助。请注意，如果您有多个录音，这将隐藏页面中的所有控制栏。