flowplayer:隐藏控件

时间:2012-11-03 06:52:08

标签: jquery video flash flowplayer

默认情况下,控件是隐藏的,即使在鼠标悬停时也不会显示。

我想自定义控件UI,添加播放/暂停按钮,控件应该始终可见。

我正在为div命名“flowplayer is-splash”。

1 个答案:

答案 0 :(得分:0)

Change the files names/path accordigly:
 You can also check the code here http://easydaytravels.com/video/example/

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- A minimal Flowplayer setup to get you started -->


    <!-- 
        include flowplayer JavaScript file that does  
        Flash embedding and provides the Flowplayer API.
    -->
    <script type="text/javascript" src="flowplayer-3.2.4.min.js"></script>

    <!-- some minimal styling, can be removed -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- page title -->
    <title>Example</title>

</head><body>

    <div id="page">

        <h1>Black hawk down Part1</h1>
             <br>
        <a href="http://easydaytravels.com/files/Vts_03_1.flv"
    style="display:block;width:425px;height:300px;"
    id="player1">
</a>

<h1>Black hawk down Part2</h1>
             <br>

        <a href="http://easydaytravels.com/files/Vts_03_2.flv"
    style="display:block;width:425px;height:300px;"
    id="player"></a>

    <!--<a href="http://localhost/flv/Vts_03_1.flv"
    style="display:block;width:425px;height:300px;"
    id="player1">
</a>
    <h1>Black hawk down Part2</h1>
             <br>

        <a href="http://localhost/flv/Vts_03_2.flv"
    style="display:block;width:425px;height:300px;"
    id="player">
</a>-->

        <!-- this will install flowplayer inside previous A- tag. -->
        <!--<script>
            flowplayer("player", "../flowplayer-3.2.5.swf");
        </script>
    -->

    <script>

flowplayer("player1", "../flowplayer-3.2.5.swf", {
    clip: {
        // these two configuration variables does the trick
        autoPlay: false,
        autoBuffering: false // <- do not place a comma here
    }
});     

flowplayer("player", "../flowplayer-3.2.5.swf", {
    clip: {
        // these two configuration variables does the trick
        autoPlay: true,
        autoBuffering: true // <- do not place a comma here
    }
});     

    </script>


    </div>


</body></html>

您可以尝试这样:

flowplayer("player_id", "/path/to/flowplayer-3.1.1.swf", {
    onMouseOut: function() {
        $f().getControls().show();
    },

    plugins:  {
        controls:  {
            backgroundGradient: 'none',
            backgroundColor: 'transparent',
            backgroundImage: 'url(/path/to/background.png)',
            backgroundRepeat: 'repeat'
        }
    }
});

您也可以参考此http://flash.flowplayer.org/forum/8/20841来解决此问题。