Simple Playlists using Javascript

最新推荐文章于 2025-08-22 11:32:18 发布

wapysun

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量37

点赞数

文章标签： javascript ViewUI

本文展示了如何在不使用Playlist插件的情况下，仅通过简单的a标签实现Flowplayer播放视频文件的功能，包括样式设置、HTML代码示例以及配置流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

In this demo, we want to make simple links (A href tags) that will play avideo file in Flowplayer. While you can achieve this functionality using theplaylist plugin, this implementation is much simpler and does not depend onjQuery or the playlist plugin itself.

The drawback compared to using playlist plugin is that those links are nottied to the player in any way. They simply start a movie clip from thebeginning each time they are clicked. They have no states such as loading,playing or paused.

HTML

<a
    href="KimAronson-TwentySeconds70930.flv"
    style="display:block;width:400px;height:300px;"
    id="player">
</a>

<div id="clips">
    <a href="KimAronson-TwentySeconds70930.flv">Eating sushi</a>
    <a href="KimAronson-TwentySeconds64268.flv">Hotel room with brown carpet</a>
    <a href="KimAronson-TwentySeconds63617.flv">Small lake and a bicycle</a>
</div>
<br clear="all" />

HTML

Configuration

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.8.swf", {

    clip: {
        // use baseUrl so we can play with shorter file names
        baseUrl: 'http://blip.tv/file/get',

        // use first frame of the clip as a splash screen
        autoPlay: false,
        autoBuffering: true
    }
});

// get all links that are inside div#clips
var links = document.getElementById("clips").getElementsByTagName("a");

// loop those links and alter their click behaviour
for (var i = 0; i < links.length; i++) {
    links[i].onclick = function() {

        // play the clip specified in href- attribute with Flowplayer
        $f().play(this.getAttribute("href", 2));

        // by returning false normal link behaviour is skipped
        return false;
    }
}