当前位置：文江博客话题详情

Flowplayer 向视频添加步骤

发布于 2024-10-21 07:49:42 字数 204 浏览 9 评论 0原文

大家好，我怎样才能使用一些 HTML 添加步骤到视频中，例如：

步骤 1 -> 00:00 | 00:00步骤2-> 03:01 | 03:01步骤3-> 05:33。

Flowplayer 是否为此提供了一些功能？

谢谢。

原文

分享到QQ

分享到微博

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

发布评论

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

假情假意假温柔 2024-10-28 07:49:42

是的，您可以通过 Flowplayer 的 JavaScript API 来完成此操作。这是示例。

基本上，您只需调用播放器上的 seek 方法即可。

$f("player").seek(55 /* seconds */);

Yes, you can do it through Flowplayer's JavaScript API. Here's an example.

Basically, you just call the seek method on the player.

$f("player").seek(55 /* seconds */);

回复收藏 0 原文

一杯敬自由 2024-10-28 07:49:42

尝试一下这个非常简单的例子。它适用于 Chrome 和 Firefox。我只是使用纯 html 5 和 javascript 以及一个按钮（顺便说一句，它呈现得相当小），并且我使用了来自此处。希望这有帮助。
<代码>

        function changeTheChapter()
        {

            var currentChapter = parseFloat(document.getElementById("currentChapter").value);
            var videoPlayer = document.getElementById("tehplayer");

            var positon = [];

            positon[0] = 0;
            positon[1] = 30;
            positon[2] = 60;

            videoPlayer.currentTime = positon[currentChapter];
            document.getElementById("currentChapter").value = parseFloat(currentChapter+1);
            //videoPlayer.currentTime = position[currentChapter];
        }
    </script>
</head>
<body>
    Video For Everybody Generator
    MP4 Video Ogg Video WebM Video Poster Image Fallback Title Width Height Autoplay XML Formatting Embed as HTML5+Flash HTML5 Flash Poster Flash Player
    Preview
    Big Buck Bunny

    Download video: MP4 format | Ogg format | WebM format
    Source Code

    <!-- "Video For Everybody" v0.4.2 by Kroc Camen of Camen Design -->
    <video id="tehplayer" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
    </video>
    <input type="hidden" id="currentChapter" value="0" />
    <p>
        <strong>Download video:</strong> 
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | 
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
    </p>
    <button id="chapterChange" value="Go To Next" onclick ="changeTheChapter();"/>

</body>

<代码>

Try this really simple example to play with. It works in chrome and firefox. I am just using plain html 5 and javascript and a button (which is rendered pretty small btw) and I used alot of info from here. Hope this helps.

        function changeTheChapter()
        {

            var currentChapter = parseFloat(document.getElementById("currentChapter").value);
            var videoPlayer = document.getElementById("tehplayer");

            var positon = [];

            positon[0] = 0;
            positon[1] = 30;
            positon[2] = 60;

            videoPlayer.currentTime = positon[currentChapter];
            document.getElementById("currentChapter").value = parseFloat(currentChapter+1);
            //videoPlayer.currentTime = position[currentChapter];
        }
    </script>
</head>
<body>
    Video For Everybody Generator
    MP4 Video Ogg Video WebM Video Poster Image Fallback Title Width Height Autoplay XML Formatting Embed as HTML5+Flash HTML5 Flash Poster Flash Player
    Preview
    Big Buck Bunny

    Download video: MP4 format | Ogg format | WebM format
    Source Code

    <!-- "Video For Everybody" v0.4.2 by Kroc Camen of Camen Design -->
    <video id="tehplayer" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
        <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
    </video>
    <input type="hidden" id="currentChapter" value="0" />
    <p>
        <strong>Download video:</strong> 
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | 
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
    </p>
    <button id="chapterChange" value="Go To Next" onclick ="changeTheChapter();"/>

</body>

回复收藏 0 原文

~没有更多了~