如何使用HTML5在页面中添加视频和播放列表？

Question

我之前一直使用带有播放列表选项的基于Flash的JWPlayer 4。最近我升级到声称支持HTML5的JWPlayer 5。播放器本身在支持HTML5但不支持Flash的移动设备上可以逐渐降级，但是启用播放列表选项后会出现问题。

请问有人可以告诉我，我在使用JWPlayer 5时做错了什么，以及如何使其与移动设备的播放列表选项配合使用，或者教我使用HTML5更好地设置视频和播放列表的方法？

资源

1. JW Player和播放列表配置示例页面

2. JWPlayer和播放列表布局示例：

- cwd

---

这不是关于嵌入式系统编程的。重新标记。 - uɐɪ

你应该向JWPlayer开发者寻求支持。这个链接可能会有所帮助。 - ExpExc

@BrianMaltzan - 和上面资源#1中的差不多。我很乐意在iPad上让这个例子运行（带播放列表）。 - cwd

Answer 1

这不是针对JW Player的特定答案。

如果你替换标签，浏览器原生的HTML视频标签会表现得很奇怪。相反，你应该直接在标签中设置单个src属性。通过这种方式，你可以在DOM中更改该属性。在更改之前，请尝试先暂停正在播放的视频。

我使用mediaelementjs.com。它的效果非常好。

它没有内置的播放列表功能，但是你可以轻松地自己构建一个。毕竟，播放列表只是一个视频列表，当你点击其中一个时，你就会更改视频源。

Media element具有setSrc（）函数，支持HTML5和flash回退。对我很有效。

- Moe Sweet

---

如果您能提供一个实现的例子，那就太棒了。 - cwd

dev-moeam -dot- hardwarezone -dot- com /videogallerys 把每个幻灯片视为播放列表中不同的音轨。您正在寻找videog.js中的launch_video_player函数。 - Moe Sweet

Answer 2

Here is a piece of script for jwplayer 6.7 and YouTube playlist.

<script>
jwplayer("myElement").setup({
  width: "100%",
  height: "400",
  playlist: "http://gdata.youtube.com/feeds/api/playlists/PLMIePZMXPqnYlsvE_PFwe-_e336HlJF7g?max-results=50&alt=rss",
  stretching: "exactfit",
  primary: "flash",
  sharing: {link: "http://www.centraltv.fr/egypte-television/rotana-masriya"},
  autostart: "true",
  listbar: {
    position: "right",
    size: "220" 
  }
});
</script>

- Ctv

Answer 3

这不是你主要问题的答案，只是一些通用提示。

1. 升级。我在5.6上遇到了一些在移动设备上无法播放的问题，而升级到5.8解决了这个问题。

2. 目前应避免自动播放。我曾经遇到过播放器无法加载的问题。这可能是由于加载大型媒体文件时出现定时问题，并且JavaScript尝试开始播放造成的。此外，对于带有较慢连接（如我的3MB DSL）的Linux用户，当播放头赶上并且缓冲区为空时，播放器将停止工作。

3. 也许可以覆盖模式。对于我的媒体，html5似乎播放得更好。

   modes: [ { type: "html5" }, { type: "flash", src: "/media/player.swf" } ]

4. 尽量使用与您的媒体相同的高度/宽度。

5. 如果只播放音频-如果您的宽度值很大，则很难找到位于中心的播放按钮。

6. 我没有使用播放列表。我在页面上有一个录音列表和一个加载弹出窗口/对话框的按钮。

- Brian Maltzan

Answer 4

这些链接可能会有所帮助：

1. HTML 5 视频或音频播放列表
2. PagePlayer
3. JW Player 5
4. 为 HTML5 视频生成播放列表

- sepulchered

---

这些链接很有帮助 - 谢谢。对其他人的提示 - PagePlayer 仅适用于音频，而您提供的 JW Player 5 链接无法在 iPad 上加载视频。 - cwd

Answer 5

如果你只是使用YouTube视频，他们提供了一个（beta）HTML5视频播放器：http://code.google.com/intl/en/apis/youtube/iframe_api_reference.html

我在这个网站上使用HTML5视频播放器：http://www2.highpoint.edu

而旧版本的IE不能很好地使用该播放器，所以我仍然使用Flash嵌入标签来代替那些浏览器，这是通过YouTube js api完成的：http://code.google.com/intl/en/apis/youtube/js_api_reference.html

这是一个示例页面：http://www2.highpoint.edu/youtube.php?id=ht1PrQkE3WU

如果你需要自己制作视频播放器，我强烈推荐使用mediaelementjs。虽然我们网站上的所有视频都是由YouTube托管的，但我们仍然将其用作音频播放器，就像在这里看到的一样：http://www2.highpoint.edu/president.php?mp3=http%3A%2F%2Fwww2.highpoint.edu%2Fmp3%2FNQ_LI013107.mp3

- Teddy

---

谢谢。我有没有错过任何链接上的播放列表？我没看到。 - cwd

我的示例中没有播放列表，但YouTube在这里有文档记录：http://code.google.com/intl/en/apis/youtube/player_parameters.html?playerVersion=HTML5#playlist 和 http://code.google.com/intl/en/apis/youtube/js_api_reference.html#loadPlaylist - Teddy

mediaelementjs 将为您提供绑定到“ended”事件的机会，您可以使用它来编写自己的播放列表代码：http://mediaelementjs.com/#api - Teddy

Answer 6

移动设备不支持swf格式

我认为这很有用，但需要两种文件类型

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" /> <!-- for iPad :) -->
  <source src="movie.ogg" type="video/ogg" /> <!--for windows  -->
  Your browser does not support the video tag.
</video> 

我尝试使用JavaScript更改电影，它在两个平台上都可以工作。

你必须使用这个，因为我有一个iPad，无法打开基于SWF的视频播放器的视频。

- 05-MaN

Answer 7

JWPlayer的最新版本也支持HTML5播放。现在它也可以用于不支持flash的移动设备。

另一个带有flash回退的HTML5视频播放器是videoJS（http://videojs.com/）

- Variant

---

你读了问题吗？你的第一句话让我觉得你没有。你的第二句话很有帮助。 - cwd

实际上，我开始……然后直接跳到了问题。 - Variant