Question

这完全是奇怪的.......

这是我的代码：

HTML

   <a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a>

JAVASCRIPT

$(document).ready(function () {
flowplayer('a.video', {
        src: '/swf/flowplayer.commercial-3.2.7.swf',
        clip: {
            autoPlay: false,
            autoBuffering: true
        }
    });
})

以上examaple不起作用，播放器不会在DOM中创建。但是下面的例子确实（我正在做的就是两次调用flowplayer）.....?！

HTML

   <a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a>

JAVASCRIPT

   $(document).ready(function () {
   flowplayer('a.video', {
        src: '/swf/flowplayer.commercial-3.2.7.swf',
        clip: {
            autoPlay: false,
            autoBuffering: true
        }
    });

   flowplayer('a.video', {
        src: '/swf/flowplayer.commercial-3.2.7.swf',
        clip: {
            autoPlay: false,
            autoBuffering: true
        }
    });
})

为什么？

Answer 1

尝试删除超链接的测试说明，它应该有效：

<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">**Test**</a>

尝试移动页面底部的脚本。这是best practices

之一

这是我的样本，它有效：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Set default value</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
    </head>
    <body>
        <a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px"></a>   

        <script type="text/javascript">
            $(document).ready(function () {

            flowplayer('a.video', {
                src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
                clip: {
                    autoPlay: false,
                    autoBuffering: true
                    }
                });
            })
        </script>
    </body>
</html>

Answer 2

我最近在锚标记内有一个播放图标时遇到了这个问题。我最后在点击时清空锚标记HTML以解决此问题。示例代码如下。

HTML：

<a id="videoPlayer" class="videoPlayer" href="[VIDEO_URL]" style="background-image: url(VIDEO_THUMB_URL);">
    <img src="/images/icon_video_play.png" width="40" height="40" alt="View video" />
</a>

CSS：

a.videoPlayer { 
    display: block;
    width: 480px;
    height: 270px; 
    text-align: center; 
    cursor: pointer;
}

a.videoPlayer img {
    margin-top: 115px;
    border: 0px;
}

使用Javascript：

$(document).ready(function () {
    $("a.videoPlayer").click(function (e) { 
        // Empty anchor tag to avoid having to click twice
        $(this).empty();

        flowplayer("videoPlayer", "/flash/video/flowplayer.swf");               

        e.preventDefault();
    });

});

为什么我要两次唤起流媒体？

2 个答案: