JW Player 5.10

2012/10から、v5.10+slim.zipに切り替える。

  1. jwplayer.jsとplayer.swfを別フォルダーに保存し、相対アドレスで指定してもよい。※swfobject.jsは不要
  2. file:およびimage:も相対アドレスでよい。
  3. プレイヤーのデザインはskin:で指定できる。
iPad/iPhoneではHTML5 videoになる。embedタグは使えない。

An Example of the JW Player

JW Player goes here
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">
  jwplayer("mediaplayer").setup({
  flashplayer: "jwplayer.swf",
  file: "../../video/flower.mp4",
  image: "../../video/flower.jpg",
  width: "320", height: "240",
  skin: "slim.zip"
  });
</script>

※controlbarのオフセット値はslim.xmlで変える。settingsのmarginを10から0に変更した。
※iPad/iPhoneではHTML5のコントロールバーになる。

 

<embed
  flashvars="file=video/001.mp4&image=video/001.jpg&skin=slim.zip"
  allowfullscreen="true"
  allowscriptaccess="always"
  id="player1"
  name="player1"
  src="jwplayer.swf"
  width="320"
  height="200"
/>
※height = 動画の縦幅+コントローラの縦幅20px
※iPadでは動作不可。
JW Player goes here

'plugins': {'viral-2': {}}

viral plugin付きのときに追加するコードの例。

  title: "Sample",
  author: "sigmasns.com",
  date: "2012年8月20日",
  description: "動画プレイヤの例です。",

 

XMLではなくインラインで設定できるようになった。

連続再生ができなくなった? →repeat:"list" 追加 iPad

 

 

Loading the player ...

 

'playlist': [
  {'file': 'video/001.mp4', 'image': 'video/001.jpg', 'title': 'The first video' },
  {'file': 'video/002.mp4', 'image': 'video/002.jpg', 'title': 'The second video'},
  {'file': 'video/003.mp4', 'image': 'video/003.jpg', 'title': 'The second video'}],
  repeat:"list"

コントロールバーにが表示される。

Javascript APIの例

chrome ローカルでは無効になる。

onclick="jwplayer(jwlist).play()"Start/stop the player
onclick="jwplayer(jwlist).playlistItem(1)"Start 2nd video
onclick="jwplayer(jwlist).playlistItem(2)"Start 3rd video

JWPlayer公式サイト

HTML5 Video

  • サポート比率 83% (IE6/7/8はサポートなし)
  • Chrome 32% Firefox 18% IE9/10 16% Safari 4%
  • mp4またはwebmをサポートしているのは50%
    mp4  webm

Javascript API

Loading the player ...
  • Start the player
  • Get current position