vimeo 和 javascript (froogaloop) - 获取视频信息

发布于 2024-12-28 00:28:09 字数 2767 浏览 4 评论 0原文

我有这个非常简单的代码。我对此有一些问题。

<!DOCTYPE html>
<html>
  <head>    
  <!--
  <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
  -->
  <script src="https://raw.github.com/vimeo/player-api/master/javascript/froogaloop.js"></script>
  </head>

  <body>

    <iframe
        id="vimeo_1"
        src="http://player.vimeo.com/video/7100569?api=1&player_id=test"
        width="400"
        height="225"
        frameborder="0">
    </iframe>

    <a id="play" href="javascript:void(0)">play</a>
    <a id="pause" href="javascript:void(0)">pause</a>
    <a id="mute" href="javascript:void(0)">mute</a>
    <input id="volume" type="range" min="0" max="1" value="0.5" step="0.01" />
    <a id="videoInfo" href="javascript:void(0)">video info</a>

    <div>
        <ul id="showVideoInfo">
        </ul>
    </div>

    <div id="debug"></div>

    <script>
    var v1 = document.getElementById('vimeo_1');
    var play = document.getElementById('play');
    var pause = document.getElementById('pause');
    var mute = document.getElementById('mute');
    var volume = document.getElementById('volume');
    var videoInfo = document.getElementById('videoInfo');

    var debug = document.getElementById('debug');

    $f(v1).addEvent('ready', function(pID){
        console.log('ready');
    });

    addEvent(play, 'click', playVideo);
    addEvent(pause, 'click', pauseVideo);
    addEvent(mute, 'click', muteVideo);
    addEvent(volume, 'change', volumeVideo);
    addEvent(videoInfo, 'click', infoVideo);

    function addEvent(obj, name, callback) {
        if (obj.addEventListener)
            obj.addEventListener(name, callback, false);
        else
            obj.attachEvent(name, callback, false);
    }

    function playVideo() {
        console.log('play');
        $f(v1).api('play');
    }

    function pauseVideo() {
        console.log('pause');
        $f(v1).api('pause');
    }

    function muteVideo() {
        console.log('mute');
        $f(v1).api('setVolume', 0);
    }

    function volumeVideo() {
        console.log(this.value);
        $f(v1).api('setVolume', this.value);
    }

    function infoVideo() {
        console.log('videoInfo: ');
        $f(v1).api('paused', function(v) {
            console.log(v);
        });
    }
    </script>

  </body>

</html>

首先,像播放、暂停、静音和音量滑块(仅限 webkit)这样的按钮工作正常。 但是,当我需要从视频中获取一些视频数据并在某个地方(例如控制台)打印时,没有任何效果,并且显示类似的消息:

Chrome 中的错误

在这里搜索时我发现了一些有关此问题的问题,但对他们有用的一切对我来说根本不起作用。啊!

谁能帮助我吗?谢谢。

I have this really simple code. And i've some problems with it.

<!DOCTYPE html>
<html>
  <head>    
  <!--
  <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
  -->
  <script src="https://raw.github.com/vimeo/player-api/master/javascript/froogaloop.js"></script>
  </head>

  <body>

    <iframe
        id="vimeo_1"
        src="http://player.vimeo.com/video/7100569?api=1&player_id=test"
        width="400"
        height="225"
        frameborder="0">
    </iframe>

    <a id="play" href="javascript:void(0)">play</a>
    <a id="pause" href="javascript:void(0)">pause</a>
    <a id="mute" href="javascript:void(0)">mute</a>
    <input id="volume" type="range" min="0" max="1" value="0.5" step="0.01" />
    <a id="videoInfo" href="javascript:void(0)">video info</a>

    <div>
        <ul id="showVideoInfo">
        </ul>
    </div>

    <div id="debug"></div>

    <script>
    var v1 = document.getElementById('vimeo_1');
    var play = document.getElementById('play');
    var pause = document.getElementById('pause');
    var mute = document.getElementById('mute');
    var volume = document.getElementById('volume');
    var videoInfo = document.getElementById('videoInfo');

    var debug = document.getElementById('debug');

    $f(v1).addEvent('ready', function(pID){
        console.log('ready');
    });

    addEvent(play, 'click', playVideo);
    addEvent(pause, 'click', pauseVideo);
    addEvent(mute, 'click', muteVideo);
    addEvent(volume, 'change', volumeVideo);
    addEvent(videoInfo, 'click', infoVideo);

    function addEvent(obj, name, callback) {
        if (obj.addEventListener)
            obj.addEventListener(name, callback, false);
        else
            obj.attachEvent(name, callback, false);
    }

    function playVideo() {
        console.log('play');
        $f(v1).api('play');
    }

    function pauseVideo() {
        console.log('pause');
        $f(v1).api('pause');
    }

    function muteVideo() {
        console.log('mute');
        $f(v1).api('setVolume', 0);
    }

    function volumeVideo() {
        console.log(this.value);
        $f(v1).api('setVolume', this.value);
    }

    function infoVideo() {
        console.log('videoInfo: ');
        $f(v1).api('paused', function(v) {
            console.log(v);
        });
    }
    </script>

  </body>

</html>

First of all, buttons like PLAY, PAUSE, MUTE and the volume slider (webkit only) works fine.
But when i need to get some video data from video and print somewhere (console, for example) nothing works and a message like that is shown:

ERROR in Chrome

Searching around here i've found some question about that, but everithing that works for them simply not work for me. argh!

Can anyone help me? Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

心不设防 2025-01-04 00:28:09

您出现此错误是因为您正在将视频作为本地文件播放。您必须在 Web 服务器上运行代码(甚至在本地使用 MAMP 或 WAMP)。

肯.

You have this error because you are playing your video as a local file. You have to run your code on a web server (even locally with MAMP or WAMP).

Ken.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文