javascript - 刚开始使用jwplayer，有几个问题

Question

我刚开始使用 jwplayer，我有几个问题:

1. 如何在标题旁边附加/显示缩略图(类似于 youtube)？我必须自己创建缩略图还是 jwplayer 为我创建缩略图？

2. 播放列表部分看起来很单调，它只显示标题。如何显示视频的一些附加信息？即时间、作者/上传者等

如果有文档，请指点我，到目前为止我还没有找到它。

我当前的代码:

<script type="text/javascript">
    jwplayer("myElement").setup({
        playlist: [{
            file: "/common/assets/sample_iPod.m4v",
            title: "Sample Video 1"
        },{
            file: "/common/assets/Wildlife_512kb.mp4",
            title: "Animals being CUTE!!!"
        },{
            file: "https://s3.amazonaws.com/asteroid.static.www.otcmarkets.com/videos_presentations/OTCM/Wildlife_512kb.mp4",
            title: "video from S3"
        },{
            file: "https://s3.amazonaws.com/asteroid.static.www.otcmarkets.com/videos_presentations/OTCM/sample_iPod.m4v",
            title: "ipod help from S3"
        }],
        width: 770,
        height: 360,
        listbar: {
            position: 'right',
            size: 240
        }
    });
</script>

Answer 1

为此，您需要为每个播放列表条目添加图片和描述。

引用 - http://www.longtailvideo.com/support/jw-player/29249/playlist-sidebar-component

使用的代码:

<div id="myElement"></div>

<script>
    jwplayer("myElement").setup({
      playlist: [{
        file: "/uploads/sintel.mp4",
        image: "/uploads/sintel.jpg",
        title: "Sintel Trailer",
        description: "Sintel is a fantasy CGI movie from the Blender Open Movie Project."
      },{
        file: "/uploads/tears.mp4",
        image: "/uploads/tears.jpg",
        title: "Tears of Steel Trailer",
        description: "A complete open pipeline was used to produce this visual effect film."
      },{
        file: "/uploads/bunny.mp4",
        image: "/uploads/bunny.jpg",
        title: "Big Buck Bunny Trailer",
        description: "This  animated film is made using free and open source software."
      },{
        file: "/uploads/elephants.mp4",
        image: "/uploads/elephants.jpg",
        title: "Elephants Dream Trailer",
        description: "This is the worlds first open movie, made entirely with Blender."
      }],
      width: 700,
      height: 240,
      listbar: {
        position: "right",
        size: 280
      }
    });
</script>