Vimeo random seekTo() & play_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-12 20:09 出处：网络

I\'ve been looking for a way to make the Vimeo Player on our website start at an offset randomly picked from an array.

相关专题：vimeo

I've been looking for a way to make the Vimeo Player on our website start at an offset randomly picked from an array.

I've found that the Vimeo API provides a function called seekTo(), described on the Vimeo site as follows:

Seeks to the specified point in the video. Will maintain the same playing/paused state. The Flash player will not seek past the loaded point, while the HTML player will seek to that spot regardless of how much of the video has been loaded.

Strictly spoken, this works: the page loads, and the video progress indicator is set at the chosen offset. However, if the video starts playing, it starts from the beginning. This happens regardless of how I start the video (autoplay in the iframe src-attribute, 'play'-function of the API, play button on the video).

I've found discussions of similar problems, though they were concerned with the Flash player and the fact that the video needs to be loaded, whereas the description above says it shouldn't be a problem with the HTML version.

Below, you can find my HTML and JS, in the version with the autoplay added to the url. If anyone has any experience with this kind of problem, any help will be greatly appreciated.

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>bla</h1>
    <iframe id="vimeoframe" src="http://player.vimeo.com/video/29705942?autoplay=1&am开发者_开发百科p;amp;api=1&amp;player_id=vimeoframe&amp;title=0&amp;byline=0&amp;portrait=0" width="521" height="293" frameborder="0"></iframe>
    <script type="text/javascript" src="../common/templates/template3/js/vimeo.random.js"></script>
</body>
</html>

The JS:

if (window.addEventListener){
    window.addEventListener('message', onMessageReceived, false);
} else { // IE
    window.attachEvent('onmessage', onMessageReceived, false);
}
function onMessageReceived(e) {
    var data = JSON.parse(e.data);
    if (data.event === 'ready') {
        seekTo();
    }
}
function seekTo(){
    var videoCuts = [20,40,60]; //to be filled with actual cuts provided by Sven
    var vimeoStartPoint = videoCuts[Math.floor(Math.random()*videoCuts.length)];
    var vimeoframe = document.getElementById("vimeoframe");
    var url = "http://player.vimeo.com";
    var vimeoJSONObject = JSON.stringify({method:"seekTo",value:vimeoStartPoint});
    vimeoframe.contentWindow.postMessage(vimeoJSONObject,url);
}

Perhaps this will help you understand how the Vimeo API works. I think your whole JSON thing is making it way harder than it needs to be. http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html