概要
http://blog.nicovideo.jp/niconews/34167.html
なんかここみてたら・・・
実装日未定ですが、動画引用機能が・・・
ほぅ・・・
よし、つくってみようということで
http://qiita.com/taktod/items/04d7c7865bef2570f53e
こちらで書いたtakcastに実装してみました。
実際に使ってみる場合は
$ git clone git@github.com:taktod/takcast
$ cd takcast
$ npm install
$ npm install --save taktod/takcast.source.youtube
$ npm run setup
$ npm test
でいけると思います。
実際の画面はこうなりました。
選択にyoutubeが増えている
放送したい動画のIDをいれて右のボタンをクリックして取り込み
動画がちゃんと取り込めたら、右下の[+]ボタンで実際にアイテムとして取り込めます。
こんな感じで再生できます。
もちろん任意の場所で回転したり拡大縮小したりできます。
まぁ、シークがないし、リロードができないし等、いろいろ問題ありますが、とりあえずiframeでvideoタグによる再生できるソースならなんでも同じ方法で配信できそうです。
感想いろいろ
iframe
iframeの中身のデータは基本cross domainの問題でアクセスできないんですが、electronで母体のhtmlがfile://でアクセスしている場合はその制限の外にいけるみたいですね。
iframe.contentWindow.document.getElementsByTagName("video")
で中身の要素にアクセスできるので、いけるな・・・となりました。
iframeのリロードのわな
iframeの要素をreactでコントロールしている左側のパレット部に配置すると、reactの再描画が走るたびにreloadが走ってしまい、youtubeの動画が最初からやり直しになるという、状況に陥りました。
これはiframeの特徴みたいです。
回避するいい方法がみつからなかったので別の見えないところでyoutubeの外部プレーヤーを配置し、内容をミラーリングしたvideoタグを配置するという方法で対策してみました。
コンポーネントの取り扱い調整
もともと横のアイテムの部分はHTMLMediaElementのみ配置可能にしていたのですが、今回の調整テストしているときにHTMLElementの配置を可能にしてみました。
まぁ、結局youtube -> canvas -> videoということでHTMLVideoElementを配置してるわけですが・・・
２つ目のリロードの問題があるため、みえないところに外部プレーヤーを設置して動作させてるわけですが、仮にニコ動のデータを引っ張りたい場合は、youtubeのように「javascriptのみで見えないプレーヤーの再生を実行する」
ということができなさそうなので、ちょっとめんどくさそうですね。
というわけで
とりあえずyoutubeの外部プレーヤー(iframeつかって動作してて、内部的にvideoタグをつかっている)を取り込むことに成功しました。
もっと使い勝手をよくするなら、検索APIをつかって簡単にほしい動画を表示できるようにしたり
ちゃんとリロードやシークできるように改良すべきですが、突貫でつくるなら、こんなものかなというのになりました。