如何使用flowplayer在视频中嵌入文本?

时间:2015-01-31 19:38:02

标签: javascript jquery html html5 flowplayer

flowplayer中播放视频,可在我的网站上下载。

我正在使用以下代码为右边的文本添加动画:100%使用jquery保留100%。

 flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
                wmode: 'transparent',
                // the content plugin will show the ad
                plugins: {
                    myContent: {
                        url: 'flowplayer.content-3.2.9.swf',
                        wmode: 'transparent',
                        top: 20,
                        right: '129%',
                        opacity: 0.8,
                        width: '295',
                        borderRadius: 0,
                        padding: 0,
                        background: 'transparent',
                        border: '0px solid transparent',
                        backgroundGradient: 'none',
                        style: {
                            '.title': {
                                fontSize: 16,
                                fontFamily: 'verdana,arial,helvetica'
                            }
                        },
                    }
                },
                clip: {
                    url: 'stepup.mp4',

                    // make something happen on the mid of clip
                    onCuepoint: [[1000 * 60], function(clip, cuepoint) {

                            var plugin = this.getPlugin("myContent");

                            plugin.setHtml('<p>This is sample text</p>');

                            plugin.animate({left: '129%'}, 90000);

                        }],
                }
            });
        });

我从以下代码中得到两个问题:

1)如何在视频中间设置提示点。目前它被设定为第60秒。

2)如何在停止时停止文本动画并在恢复时开始。

3)如何保持动画的屏幕宽度,从视频的左边缘到视频的右边缘。

4)视频中的嵌入文本是否存在于下载的文件中?如果不是我怎么样?

提前致谢。

1 个答案:

答案 0 :(得分:0)

以下是在流视频中添加字幕的教程。

以下示例代码:

          <p begin = "00:00:00.01" dur="04.00">
        First caption with default style coming from the Content plugin config
    </p>

          <p begin = "00:00:04.19" dur="04.00" style="1">
      2nd caption with timed text styling to make the text white
    </p>

          <p begin = "8s" dur="04.00" style="2">
      3rd caption using a small black font
    </p>
     </div>

以下是查找教程的地址:

http://flash.flowplayer.org/plugins/flash/captions.html

希望这有帮助!