連続再生の設定とユーザビリティ

連続再生の設定
https://developers.google.com/youtube/iframe_api_reference#Events
のリファレンスの中にある
onStateChange
この中にあるプレイヤーが終わった時を意味する
0(ended)
を使う
そして、これは定数が用意されているので
こちらを使うことにする
YT.PlayerState.ENDED
これを追加するには
プレイヤーを初期化する関数の
function onYouTubePlayerAPIReady() の中へ
イベントを追記する
events:{
onStateChange: onPlayerStateChange
}
そして、
function onPlayerStateChange(e){
if(e.data == YT.PlayerState.ENDED){
$(‘#next’).trigger(‘click’);
}
}
というようにする
if(e.data == YT.PlayerState.ENDED)

動画の再生が終了になったら
という意味
onPlayerStateChange
はユーザ関数で、
このように関数にしておけば使いまわしもできるし
処理を書く時に関数を書くだけでよくなる
これで実行すると、エンドレスで動画が流れる
ここまできたらユーザビリティの改良
ロードしたら自動的に検索するところにフォーカスを当てる
これはアンケートサイトとかでもよく使われる
$(‘#q’).focus();
これで、
input id=”q”
となっているので、
ここの部分に
focus() によってフォーカスがあたるようになる
記述するのは、java script ファイル
さらに、いちいち検索ボタンをおさずに
google の検索とかみたいにEnter 押せばよいようにする
これは
HTMLファイルの入力のところをフォームにすればいい
このときに、onsubmit=”return false;”
とすれば、画面遷移しなくなる
また、変更に伴い
<input type=”button” id=”search” value=”Search”>

<input type=”submit” value=”search”>
とする
form 自体のソースは
<form id=”search” onsubmit=”return false;”>
<inpout type=”text” id=”q”>
<input type=”submit” value=”Search”>
</form>
これにより
java script ファイルのほうも変更が必要
これは
click 扱いから submit になったため
なので
$(‘#search’).click(function(){
ではなく
$(‘#search’).submit(function(){
となる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です