FC2ブログ

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

連続再生の設定

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(){
となる


スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック