我之前一直使用带有播放列表选项的基于Flash的JWPlayer 4。最近我升级到声称支持HTML5的JWPlayer 5。播放器本身在支持HTML5但不支持Flash的移动设备上可以逐渐降级,但是启用播放列表选项后会出现问题。
请问有人可以告诉我,我在使用JWPlayer 5时做错了什么,以及如何使其与移动设备的播放列表选项配合使用,或者教我使用HTML5更好地设置视频和播放列表的方法?
资源
JWPlayer和播放列表布局示例:
我之前一直使用带有播放列表选项的基于Flash的JWPlayer 4。最近我升级到声称支持HTML5的JWPlayer 5。播放器本身在支持HTML5但不支持Flash的移动设备上可以逐渐降级,但是启用播放列表选项后会出现问题。
请问有人可以告诉我,我在使用JWPlayer 5时做错了什么,以及如何使其与移动设备的播放列表选项配合使用,或者教我使用HTML5更好地设置视频和播放列表的方法?
资源
JWPlayer和播放列表布局示例:
这不是针对JW Player的特定答案。
如果你替换标签,浏览器原生的HTML视频标签会表现得很奇怪。相反,你应该直接在标签中设置单个src属性。通过这种方式,你可以在DOM中更改该属性。在更改之前,请尝试先暂停正在播放的视频。
我使用mediaelementjs.com。它的效果非常好。
它没有内置的播放列表功能,但是你可以轻松地自己构建一个。毕竟,播放列表只是一个视频列表,当你点击其中一个时,你就会更改视频源。
Media element具有setSrc()函数,支持HTML5和flash回退。对我很有效。
<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>
这不是你主要问题的答案,只是一些通用提示。
升级。我在5.6上遇到了一些在移动设备上无法播放的问题,而升级到5.8解决了这个问题。
目前应避免自动播放。我曾经遇到过播放器无法加载的问题。这可能是由于加载大型媒体文件时出现定时问题,并且JavaScript尝试开始播放造成的。此外,对于带有较慢连接(如我的3MB DSL)的Linux用户,当播放头赶上并且缓冲区为空时,播放器将停止工作。
也许可以覆盖模式。对于我的媒体,html5似乎播放得更好。
modes: [ { type: "html5" }, { type: "flash", src: "/media/player.swf" } ]
尽量使用与您的媒体相同的高度/宽度。
如果只播放音频-如果您的宽度值很大,则很难找到位于中心的播放按钮。
我没有使用播放列表。我在页面上有一个录音列表和一个加载弹出窗口/对话框的按钮。
如果你只是使用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
移动设备不支持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的视频播放器的视频。
JWPlayer的最新版本也支持HTML5播放。现在它也可以用于不支持flash的移动设备。
另一个带有flash回退的HTML5视频播放器是videoJS(http://videojs.com/)