概要

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をつかって簡単にほしい動画を表示できるようにしたり
ちゃんとリロードやシークできるように改良すべきですが、突貫でつくるなら、こんなものかなというのになりました。