We have a website that show our own PRO vimeo videos behind paid login. Now we want to list all videos on open website but only show x seconds of preview of every video. When not logged in user is clicking on the video, there should only be x seconds of preview and after x seconds I would prefer to be able to add a graphic purchase message. Example "Become a member if you want to have access to whole video."
2 回答
当然是!实际上,我前几天刚刚实现了这一点。它利用 Vimeo 提供的 froogaloop 库。请在此处阅读更多信息:https ://developer.vimeo.com/player/js-api
这是关于 jsFiddle 的示例:http: //jsfiddle.net/pL5cj1yu/1/
下面是小提琴中的代码供后代使用。下面的代码片段应该在有效的 HTML 页面上开箱即用。请记住,Vimeo 仅以秒为单位报告时间。
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player1" src="//player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div>
<p>Status: <span class="status"></span></p>
</div>
<script>
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
var status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
setTimeout(function () {
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) {
//when paused show alert
alert(id);
}
function onFinish(id) {
}
function onPlayProgress(data, id) {
status.text(data.seconds);
//set time var
var Time = data.seconds;
//if time is 10 seconds pause.
if (Time >= '10') {
player.api('pause');
}
}
});
</script>
Check out Vid.Watch - I think it's what your'e looking for. Vid.Watch is an automated SaaS platform that automatically generates video previews for websites. These previews are automatically displayed on the website (on mouseover or autoplay on video thumbnail) and can be customized with editorial control. (disclaimer: I work at Vid.Watch :))