Flowplayer 控件:自动隐藏和自动播放

发布于 2024-12-16 01:04:46 字数 3442 浏览 2 评论 0原文

我无法让我的播放器自动启动或自动隐藏控件。我相信我已经正确设置了它,但它不起作用。这是我的整个脚本标记:

<script type="text/javascript">
    // wait for the DOM to load using jQuery
    $(function() {

        // setup player normally
        $f("videoPlayer", "videos/flowplayer-3.2.7.swf", {

            // clip properties common to all playlist entries
            clip: {
                autoPlay: false,
                autoBuffering: true,
                baseUrl: 'http://thepartysource.com/videos/',
                subTitle: '',
                time: '' 
            },

            // our playlist
            playlist: [
                {
                    url: 'DRINK DIFFERENTLY - 480x272.m4v',
                    autoPlay: true
                },
                {
                    url: 'DRINK DIFFERENTLY - 480x272.m4v'
                }
            ],

            // show playlist buttons in controlbar
            plugins: {
                controls: {
                    playlist: true,

                    // display properties such as size, location and opacity
                    top: 20,
                    left: 0,
                    bottom: 0,
                    opacity: 0.95,

                    // styling properties (will be applied to all plugins)
                    background: '#000', // url(/my/custom/controls.png) no-repeat 3px 6px',
                    backgroundGradient: 'low',

                    // controlbar specific settings
                    timeColor: '#980118',
                    all: false,
                    play: false,
                    scrubber: true,
                    fullscreen: true,

                    // tooltips (since 3.1)
                    tooltips: {
                        buttons: false,
                        //fullscreen: 'Enter fullscreen mode'
                    },

                    autoHide: {
                        enabled: true,

                        // always enable
                        fullsccreenOnly: false,

                        // make it hide faster
                        hideDelay: 1000,

                        mouseOutDelay: 500
                    }
                }
            }
        });

        /*
            here comes the magic plugin. It uses first div.clips element as the 
            root for as playlist entries. loop parameter makes clips play
            from the beginning to the end.
        */
        $f("videoPlayer").playlist("div.clips:first", {loop:true});
    });

</script>

这是 HTML 区域:

<div class="box-movie">
    <!-- the player using splash image -->
    <a class="player plain" id="videoPlayer">
        <img src="images/play_text_large.png" />
    </a>

    <div class="clips" style="margin-top:15px;">
        <!-- single playlist entry as an "template" -->
        <a href="${url}">&nbsp;
            <!--${title}--> <!--<span>${subTitle}</span>-->
            <!--<em>${time}</em>-->
        </a>
    </div>

    <!-- let rest of the page float normally -->
    <br clear="all"/>
</div>

编辑

我实际上发现了问题可能是什么。当它加载时,它几乎只是一个启动图像,而不是实际的播放器。您可以在 http://thepartysource.com/index_test.php 查看此内容。如果我将第二个剪辑设置为自动播放,它会在第一个剪辑完成后自动播放。

I cannot get my player to auto start or the controls to auto hide. I believe I have set this up correctly, but it is just not working. Here is my entire script tag for this:

<script type="text/javascript">
    // wait for the DOM to load using jQuery
    $(function() {

        // setup player normally
        $f("videoPlayer", "videos/flowplayer-3.2.7.swf", {

            // clip properties common to all playlist entries
            clip: {
                autoPlay: false,
                autoBuffering: true,
                baseUrl: 'http://thepartysource.com/videos/',
                subTitle: '',
                time: '' 
            },

            // our playlist
            playlist: [
                {
                    url: 'DRINK DIFFERENTLY - 480x272.m4v',
                    autoPlay: true
                },
                {
                    url: 'DRINK DIFFERENTLY - 480x272.m4v'
                }
            ],

            // show playlist buttons in controlbar
            plugins: {
                controls: {
                    playlist: true,

                    // display properties such as size, location and opacity
                    top: 20,
                    left: 0,
                    bottom: 0,
                    opacity: 0.95,

                    // styling properties (will be applied to all plugins)
                    background: '#000', // url(/my/custom/controls.png) no-repeat 3px 6px',
                    backgroundGradient: 'low',

                    // controlbar specific settings
                    timeColor: '#980118',
                    all: false,
                    play: false,
                    scrubber: true,
                    fullscreen: true,

                    // tooltips (since 3.1)
                    tooltips: {
                        buttons: false,
                        //fullscreen: 'Enter fullscreen mode'
                    },

                    autoHide: {
                        enabled: true,

                        // always enable
                        fullsccreenOnly: false,

                        // make it hide faster
                        hideDelay: 1000,

                        mouseOutDelay: 500
                    }
                }
            }
        });

        /*
            here comes the magic plugin. It uses first div.clips element as the 
            root for as playlist entries. loop parameter makes clips play
            from the beginning to the end.
        */
        $f("videoPlayer").playlist("div.clips:first", {loop:true});
    });

</script>

Here is the HTML area:

<div class="box-movie">
    <!-- the player using splash image -->
    <a class="player plain" id="videoPlayer">
        <img src="images/play_text_large.png" />
    </a>

    <div class="clips" style="margin-top:15px;">
        <!-- single playlist entry as an "template" -->
        <a href="${url}"> 
            <!--${title}--> <!--<span>${subTitle}</span>-->
            <!--<em>${time}</em>-->
        </a>
    </div>

    <!-- let rest of the page float normally -->
    <br clear="all"/>
</div>

EDIT

I actually found what the issue might be. When it loads, it is pretty much just a splash image, and not the actual player. You can view this at http://thepartysource.com/index_test.php . If I set the 2nd clip to autoplay, it does so after the first finishes.

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

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

发布评论

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

评论(1

小清晰的声音 2024-12-23 01:04:46

我必须将 div.clips 标签更改为:

<!-- the player using splash image -->
<a href="videos/flowplayer-3.2.7.swf" class="player plain" id="videoPlayer">
</a>

指定 flowplayer 的 href 以开始。这让播放器在页面加载时加载,并且自动播放开始工作。

I had to change the div.clips tag to:

<!-- the player using splash image -->
<a href="videos/flowplayer-3.2.7.swf" class="player plain" id="videoPlayer">
</a>

specifying the href to the flowplayer to start with. This let the player load on page load, and autoPlay began working.

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