Question

嘿伙计们如何使用某些HTML为视频添加步骤：

步骤1 - ＆gt; 00:00 |步骤2 - ＆gt; 03:01 |步骤3 - ＆gt; 5点33分。

Flowplayer是否有针对此的内容？

谢谢。

Answer 1

是的，您可以通过Flowplayer's JavaScript API完成。这是an example。

基本上，你只需在播放器上调用seek方法。

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

Answer 2

试试这个非常简单的例子。它适用于chrome和firefox。我只是使用普通的html 5和javascript以及一个按钮（渲染得非常小btw），我使用了很多来自here的信息。希望这可以帮助。



        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>

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 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>

Flowplayer为视频添加步骤

2 个答案: