2014-04-02 3 views
6

У нас есть видео (vimeo) ссылка, которую мы хотели бы, чтобы наши пользователи смотрели.IFrame Inside Iframe. Это можно сделать?

Каждое видео сопровождается краткой анкетой.

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

Я могу думать только о встраивании кода ниже внутри другого iframe, чтобы скрыть ссылку.

Возможно ли это?

Есть ли альтернативный подход к этому?

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta name="google" value="notranslate" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Dog Smoking</title> 

    <style type="text/css"> 
    body { 
     padding-top:0; 
     padding-bottom:0; 
     padding-left:0; 
     padding-right:0; 
     margin-top:0; 
     margin-bottom:0; 
     margin-left:0; 
     margin-right:0; 
    } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="javascript/froogaloop.js"></script> 
    <script src="javascript/froogaloop.min.js"></script> 
<script type="text/javascript"> 
var iframe = $('#player1')[0], 
player = $f(iframe), 
status = $('.status'); 

// When the player is ready, add listeners for pause, finish, and playProgress 
player.addEvent('ready', function() { 
    status.text('ready'); 

    player.addEvent('pause', onPause); 
    player.addEvent('finish', onFinish); 
    player.addEvent('playProgress', onPlayProgress); 
}); 

// Call the API when a button is pressed 
$('button').bind('click', function() { 
    player.api($(this).text().toLowerCase()); 
}); 

function onPause(id) { 
    status.text('paused'); 
} 

function onFinish(id) { 
    status.text('finished'); 
} 

function onPlayProgress(data, id) { 
    status.text(data.seconds + 's played'); 
} 
player.addEvent('ready', function() { 
    status.text('ready'); 
    $("#survey_button").show(); // <-- or whatever 
}); 
</script> 
</head> 
<body> 
    <iframe src="http://player.vimeo.com/video/4644119?api=1" width="400" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    <a href="http://show.aspx?testid=27#activate" 
    target="target-iframe" 
    onclick="frames['target-iframe'].document.getElementById('activate') 
    .scrollIntoView();return false">Click</a> 
</body> 
</html> 
+0

Политика одного и того же происхождения предотвращает междоменную связь через iframe. –

+1

Возможно, вам стоит попробовать с Ajax и с некоторыми серверными языками? –

ответ

2

Я хотел бы использовать JS API for video и использовать обратные вызовы событий, встроенные в плеер, чтобы сделать опросник видимым.

== UPDATE ==

Ok - так что ссылка является шаг за шагом пример того, как включить элементы управления JS и обратные вызовы для игрока. Но ... здесь мы идем.

Шаг 1 должен добавить «? Api = 1» после вашего начального кода вставки.

шаг 2, чтобы загрузить свою библиотеку Froogaloop, так что вы можете прослушивать события ...

шага 3 будет настроить функцию обратного вызова для обработки независимо от события вы хотите слушать на ... пример прямо из эта страница является фантастическим:

var iframe = $('#player1')[0], 
player = $f(iframe), 
status = $('.status'); 

// When the player is ready, add listeners for pause, finish, and playProgress 
player.addEvent('ready', function() { 
    status.text('ready'); 

    player.addEvent('pause', onPause); 
    player.addEvent('finish', onFinish); 
    player.addEvent('playProgress', onPlayProgress); 
}); 

// Call the API when a button is pressed 
$('button').bind('click', function() { 
    player.api($(this).text().toLowerCase()); 
}); 

function onPause(id) { 
    status.text('paused'); 
} 

function onFinish(id) { 
    status.text('finished'); 
} 

function onPlayProgress(data, id) { 
    status.text(data.seconds + 's played'); 
} 

Таким образом, в зависимости от того, когда вы хотите, чтобы ваше исследование, чтобы показать, что вы можете просто нажать на один из тех, кто ...

player.addEvent('ready', function() { 
    status.text('ready'); 
    $("#survey_button").show(); // <-- or whatever 
}); 

имеет смысл?

============= ДРУГОЙ UPDATE ================

вот рабочая скрипку: http://jsfiddle.net/QkGRd/10/. Возможно, вы захотите немного прочитать о вложении ресурсов и о том, как работает jsfiddle.

+0

Привет, эта ссылка не очень интуитивно понятна. У вас есть зубчатый пример, пожалуйста? –

+0

Большое спасибо. Извините, мне потребовалось много времени, чтобы увидеть ваши изменения. Вчера вечером я проверил, но ничего не увидел. Хорошо, см. Обновленный код выше. Я вижу видео, но я также вижу ссылку «Clicl». Наша надежда заключается в том, чтобы скрыть эту ссылку внутри iframe или каким-то образом сделать ее доступной «после», когда пользователь просмотрел видео. Я что-то пропустил? См. Обновленный код выше. –

+0

Вы можете указать jsfiddle или подобное? Вам нужно будет отредактировать мой код для работы с вашим кодом ... – panzhuli

0

TL; DR Ответ

Да, вы можете иметь IFRAME внутри фрейма. Хотя, как правило, это не очень хорошая идея с точки зрения производительности.

Смежные вопросы