私はvimeoの埋め込みAPIを調べています。私が働いている負荷に自動再生するビデオをしたいが、現在何が起こるかは、このようなものです:Vimeoのサムネイルがオフになってビデオが始まるときの制御
- プレーヤーその後、ロード自動再生[イベント「準備完了」]
- サムネイル削除し、約二 のための黒を示します
- ビデオの再生が始まります[イベント "playProgess"]
問題は2番目のステップです。サムネイルが非表示になったとき(再生が開始されるとき)からビデオが実際に再生されて再生を開始するときまでの間に、黒い画面を消去しようとしています。
私が解決できると思う方法は、サムネイルの周りを維持し、最初の "playProgress"でサムネイルを非表示にすることですが、サムネイルがオンまたはオフになったときに制御することはできません。
これは制御できますか?私はサムネイルを引っ張ってiframe上にオーバーレイできることを知っていますが、私はよりクリーンな修正を望んでいます(すべてをiframeに含めるようにしてください)。ここで
は、APIが動作しているペンです: http://codepen.io/mattcoady/pen/KMzZMZ
$(function() {
var player = $('iframe');
var playerOrigin = '*';
var status = $('.status');
// Listen for messages from the player
if (window.addEventListener) {
window.addEventListener('message', onMessageReceived, false);
}
else {
window.attachEvent('onmessage', onMessageReceived, false);
}
// Handle messages received from the player
function onMessageReceived(event) {
// Handle messages from the vimeo player only
if (!(/^https?:\/\/player.vimeo.com/).test(event.origin)) {
return false;
}
if (playerOrigin === '*') {
playerOrigin = event.origin;
}
var data = JSON.parse(event.data);
console.log(data.event);
switch (data.event) {
case 'ready':
onReady();
break;
case 'playProgress':
onPlayProgress(data.data);
break;
case 'pause':
onPause();
break;
case 'finish':
onFinish();
break;
case 'play':
onPlay();
break;
}
}
// Call the API when a button is pressed
$('button').on('click', function() {
post($(this).text().toLowerCase());
});
// Helper function for sending a message to the player
function post(action, value) {
var data = {
method: action
};
if (value) {
data.value = value;
}
var message = JSON.stringify(data);
player[0].contentWindow.postMessage(message, playerOrigin);
}
function onReady() {
status.text('ready');
post('play');
post('addEventListener', 'pause');
post('addEventListener', 'finish');
post('addEventListener', 'playProgress');
}
function onPause() {
status.text('paused');
}
function onFinish() {
status.text('finished');
}
function onPlay(){
alert('play')
}
function onPlayProgress(data) {
status.text(data.seconds + 's played');
}
});
私は正確に同じ問題を抱えています。あなたは半分の黒い画面を排除する解決策を見つけましたか? – gdaniel