Home > プログラムネタ

プログラムネタ Archive

第8回:ビデオコントロールパネルの作成 ~ソース選択画面編~

できるうちにやっておこう・・・というのは、またちがうおはなし・・・

さて、今回はソース選択画面を作りました。
技術的に特に難しいところはなく、画像や角丸の部分はCSS3です。
とりあえずyoutubeにアップされている全部のソースを表示しています。html5videoはブラウザによって再生できるフォーマットがちがうので、対応していないのは打ち消し線を施しています。上の画像はFireFoxの場合。
ちょっとつまずいたところは、1:ブラウザの対応フォーマットを調べる

canPlayType

メソッドの戻り値がFireFoxとChromeでちがった事と、2:ソース切替後、途中から再生させようとしたときの2点。

1番目は、次のソースをFireFoxのfirebugとChromeのデベロッパーツールで試した場合、FireFoxは”probably”、Chromeは”"になった。(ちゃんとvideo要素作ってから試してね)

var video = document.getElementById("video");
video.canPlayType('video/webm;+codecs="vp8.0,+vorbis"')

どちらもWebMに対応しているはずだけど、;のコロン以降の邪魔な文字のあるなしで変わっているみたい。
‘video/webm’にするとChromeでも動く。FireFoxがおおちゃくしているのだろうか。

2番目は、video.srcでソースを設定して、video.load()して、video.play()と立て続けにするとエラーが出た。
loadした後に’loadedmetadata’というイベントを取得してからplayで解決した。
このvideo周りの仕様は、AS3と似ていて雰囲気がつかみやすい。
細かい見た目の部分はまたあとで修正予定。
次回はフルスクリーンモードの切替ボタンの実装。

 

第8回のブックマークレット
ブックマークに登録してyoutubeで動画を見ながらブックマーク起動。FireFoxとChrome対応。

chromeでyoutubeを見たときjavascript:console.log(window);が空になる問題

youtubeの動画URLを抽出するブックマークレットを作っているときになりました・・・。
これでいったい何時間費やしただろう・・・疲れた・・・。

【現象】

  1. google chrome でyoutubeの動画ページを開く(http://www.youtube.com/watch?v=**********)
  2. 動画抽出系のブックマークレットを起動する(何種類か試したけど全部だめ)
  3. なぜか正常に動作しない

【ここから試行錯誤】

まずはブックマークレット事態がおかしいと思いいろいろ調べる、というか製作者のサイトではchromeの動作確認が取れてることを確認。
ブックマークレットの中身のjavascriptを調べる。
どうやらwindowオブジェクトにアクセスしても中身が空っぽの模様。

 

謎1:

youtubeを開いてchromeのデベロッパーツールでconsole.dir(window);だと正常に取得できる。
けど、javascript:console.dir(window);にしてみるとwindowが空になる。

<html>
<head>
</head>
<body>
</body>
</html>

(もう直ったから試せないけど、構造はこんな感じだったと思う)

謎2:

というか謎1の時、デベロッパーツールを起動してブックマークレットを起動すると、デベロッパーツールが一度終了する・・・。
空の構造に書き換わってるからかな?でもブラウザ上では画面遷移はなし・・・。

謎3:

動画ページじゃなくyoutubeのトップページ(http://www.youtube.com/)でもダメだった。
自分のブログやyahooのトップページだと、正常にwindowが取れた・・・。

【解決方法】

chromeをアンインストールして再インストールすると問題が直ったという情報を発見。
アンインストール後に再インストールするも「chrome.exeを探しています・・・」というダイアログが表示される。
いろいろ調べるも、Cドライブにインストールされていない模様。
ファイル・フォルダ検索で「chrome」を探すも出てこない。(余計なのは出た)

ここらでヤケクソand諦めムード

もう一度アンインストール→再起動→CCleanerというソフトでレジストリ他いろいろお掃除→再起動→https://support.google.com/chrome/bin/answer.py?hl=ja&answer=126299から代替オフライン版のインストーラーを取ってきて実行。

できたあああああああああああああああああああああああああ

 

レジストリの掃除が効いたのか代替オフライン版が効いたのかよく分かりません。

javascriptでクッキーを使う場合の注意点

次回作のFC2共有プラグインでクッキー(Cookie)を使ってみようと思う。

クッキーについては知っていたけど、深い仕組みは知らない部分もあったのでメモメモ。

 

保存する情報にはname、expires、domain、path、secureがある

name・・・クッキーの名前

expires・・・クッキー の有効期限。省略するとブラウザを終了させるまでが期限。過去の値を指定するとCookieを削除

domain・・・クッキーを発行する Webサーバー

secure・・・サーバーとの接続がセキュアである時のみクッキーを送信

 

クッキーの期限は無制限にはできない。クッキーを削除するには過去の日付を指定。この2点が新発見だった。

IE6と7でjqueryのajax()を使うとエラーが出る・・・

htmlに外部javascriptのファイルを読み込んで

その外部javascriptファイル内で$.ajax()を実行するとエラーが出るんです。

同じように$.getJSON()を使ってもエラー・・・。

 

いろんなサンプルサイトをIEで開くと動作する

自分の作ったjavascriptだけエラーがでる・・・

もしやローカルの環境だからできない・・・?

ネットにアップしてもエラー・・・

そういえばIEのajaxって文字コードがうんたらかんたら・・・

htmlのcharset=euc-jpをutf-8にしたら成功

フォオオオオオオオオオオオオオオオオオオオオオオオオ!!!

 

jsonを取得する時にサーバー側のContet-Typeをutf-8にしないとエラーが出るとは聞いてたから

html側の文字コードは完全にノーマークだった・・・

 

htmlと外部javascriptとサーバーの文字コードを統一すれば直るかな・・??

もうちょっと検証してみる

 

FC2ブログはeuc-jpで作らないと文字化けするっぽいしなぁ・・・どうしたものか

 

 

【追記】

scriptCharsetを設定するだけで解決した・・・

とりあえずめでたしめでたし

javascriptでDate.parse()を使うときブラウザ毎に差異が・・・

FC2ブログのプラグインで、javascriptだけで外部にあるRSSを取得して

RSSリーダー的なものを作ろうとしました。

各ブログエントリーを日付でソートしようとして、日付をよく見たらRSSの種類(RSS1.0、RSS2.0、Atom)によって日付のフォーマットが違うのね。

 

FC2ブログの日付は

2012-06-20T00:20:39+09:00

こんな感じです。

 

ここでタイトルの内容なんですが、この形式でDate.parse()をかけるとブラウザによってNaNになってしまいます。

Date.parse(“2012-06-20T00:20:39+09:00″)

 

Continue reading

ホーム > プログラムネタ

twitter
リンク

Return to page top