自分の力での解決は不可能でした 今週はハマりごとが大量にありましたけど、クソ面倒だったのは多分今日。 動画周りのお話です。 備忘録代わりに書きますが、詳細な技術面の話は一切しません。 自分で理解できてないことが多いし、再現しろと言われてもできないからです。 HTML5からなのかは知識不足で知らないけど、videoタグがありますよね。 直接mp4とかの動画を埋め込んでくれる便利なやつです。 その辺で大分やられました、主に5時間ほど。 今日やろうとしたのは、動画の埋め込み。 やったこととハマったことは以下の通り。 ・動画を埋め込む、埋め込みにはLity.jsを使う Lity採用理由：colorboxがクソダサだからもっとシンプルなやつっていう指示 ・Chromeはvideoタグにダウンロードボタンが付いたのでそれを削除 理由：多分ダウンロードをされたくないから、Chrome氏ね ついでに右クリックも禁止、ダウンロードされるから ・PC／Android／iPhoneすべてで問題なく見れること 理由：それなりにデカイ案件だったし、そもそもその三機種で見れるのは最低条件 主に下2つでハマりました。 とりあえずまずは一番下のやつから Android PCとiPhoneは問題なく見れたんですよね。 前者はLityのボックスで、後者はフルスクリーンで。 んだけども、なぜかAndroidは見れないわけですよ。 色々と調べてみると、どうやら4系は標準メディアプレーヤーがゴミカスな模様。 Lityで頑張って出そうとするのになぜかダウンロードをしはじめる始末です。 そのくせただvideoタグで埋め込むだけだと再生ボタンすら表示させないというクソ仕様。 誰だよAndroid4系を開発したのは、開発者出てこい。 仕方がないので、Androidに関してはJSで対処しました。 やったのはPlay()とPause()を交互に繰り返すこと。 　（多分書き方は合ってる） って感じで、videoにidを振って、クリックしたときに関数を呼びました。 JS側では function play_movide() { } みたいな感じで作った関数の中で、 ・クリックされた要素のidを取得 ・それがPlay中ならPause() ・それがPause中ならPlay() ってのをやっただけです。 Androidくんの場合だけで適用され、表示的にはフルスクリーンにならずにその場で再生されます。 タップをすると再生、もう一度タップで停止。 便利なのは、HTML5のおかげか、再生中と停止中の状態をJSで取得できることですね。 なのでif文でPlayかPauseかを判断することができるわけですよ。 このことに気づくまで3時間ぐらい掛かりました。 オイオイオイ死ぬわ俺とか思いながらやってましたよ？ Chromeのダウンロードボタン Chromeは標準のメディアプレーヤーに、56？ぐらいからダウンロードボタンがつきました。 それをクリックすることで簡単に動画を落とすことができます。 クソ仕様です、クソ仕様。 何がクソって、そういうのは基本的にしてほしくないからです。 そもそもいらねえでしょ、そんな機能。 まあそんな文句ばかりは言えないので、対処のお話です。 何やら調べてみると、 ・CSSでwebkitを用いてダウンロードボタンを消滅させる（無理やり消失） ・ver58から、videoタグにcontrolListだかでnodownloadを指定すると消えるようになった の二通りがあるようです。 後者はすごく便利ですが、なんと58系のChromeからしか適用されません。 それにしたって57以下はコンマ以下の％の人間しか使ってないから問題ないんですけどね。 で、「だったら付けて解決じゃねえか」って思うかもしれませんが、そうは問屋が卸さない。 ここに使っていたプラグイン、Lity.jsが立ちはだかります。 という本題に入る前に、ついでのお話。 もう一つの指示があって、それは右クリックを禁止するというものです。 いくらダウンロードが消えたといっても、右クリックされるようでは簡単にダウンロードはされます。 開発者ツール開かれたら簡単に落とされますけど、そこまでする人間はそういない。 右クリック禁止のやり方については調べてください。 この2点、 ・nodownloadかwebkitでボタンを消す ・右クリックを禁止する ということをしようとするとLity.jsが邪魔するわけです。 何が邪魔かって、クリックするまではそのオブジェクトが存在しないんです。 最初は ってあるんだからbodyかvideoにかけりゃええやろって思いました。 webkitだってvideo::webkit～でなんとかなるやろって思いました。 はい違います。 ぼくも良くは知りませんが、Lity.jsは画面内でiframeとbodyを生成するんですよね。 要は別画面を生成して、その中に動画をcolorbox化して読み込むみたいな？ 読み込まれるのは標準プレーヤーなんですが、iframe内のせいでJSをが入り込めません。 なんていうか、iframeの中をJSを操作することってできないらしいです。 CSSは理由がよくわからん。 要は、生成されてないんだからそのDOM操作できねえよバーカ！ iframeだからJSで疑似要素を操作することもできねえよアーホ！ って感じでハマりました。 助けてもらって解決しましたが。 解決案は、Lity.jsを使用するために付けるdata-lityを利用すること。 これを持ったDOMをクリックするときにfunction()して色々やります。 クリック関数になるので、生成されたiframe内からvideo要素を取得。 そこらへんで右クリック禁止したり、removeAttributeしたり、setAttributeしました。 という感じで解決。 氏ねって思ったのはLity.jsが想像以上に難解な仕様をしてくれたからです。 素直にHTML上で設置したvideoタグを使えって思いますよほんとに。 なにはともあれ、お陰様でダウンロードボタンを消すこともできました。 もーまんたい！もーまんたい！ ほとんどぼくの力じゃないけど！！ もうこんなんはコリゴリだよ、氏ね。 それでは今日はここらでサヨウナラー

自分の力での解決は不可能でした 今週はハマりごとが大量にありましたけど、クソ面倒だったのは多分今日。 動画周りのお話です。 備忘録代わりに書きますが、詳細な技術面の話は一切しません。 自分で理解できてないことが多いし、再現しろと言われてもできないからです。 HTML5からなのかは知識不足で知らないけど、videoタグがありますよね。 直接mp4とかの動画を埋め込んでくれる便利なやつです。 その辺で大分やられました、主に5時間ほど。 今日やろうとしたのは、動画の埋め込み。 やったこととハマったことは以下の通り。 ・動画を埋め込む、埋め込みにはLity.jsを使う Lity採用理由：colorboxがクソダサだからもっとシンプルなやつっていう指示 ・Chromeはvideoタグにダウンロードボタンが付いたのでそれを削除 理由：多分ダウンロードをされたくないから、Chrome氏ね ついでに右クリックも禁止、ダウンロードされるから ・PC／Android／iPhoneすべてで問題なく見れること 理由：それなりにデカイ案件だったし、そもそもその三機種で見れるのは最低条件 主に下2つでハマりました。 とりあえずまずは一番下のやつから Android PCとiPhoneは問題なく見れたんですよね。 前者はLityのボックスで、後者はフルスクリーンで。 んだけども、なぜかAndroidは見れないわけですよ。 色々と調べてみると、どうやら4系は標準メディアプレーヤーがゴミカスな模様。 Lityで頑張って出そうとするのになぜかダウンロードをしはじめる始末です。 そのくせただvideoタグで埋め込むだけだと再生ボタンすら表示させないというクソ仕様。 誰だよAndroid4系を開発したのは、開発者出てこい。 仕方がないので、Androidに関してはJSで対処しました。 やったのはPlay()とPause()を交互に繰り返すこと。 　（多分書き方は合ってる） って感じで、videoにidを振って、クリックしたときに関数を呼びました。 JS側では function play_movide() { } みたいな感じで作った関数の中で、 ・クリックされた要素のidを取得 ・それがPlay中ならPause() ・それがPause中ならPlay() ってのをやっただけです。 Androidくんの場合だけで適用され、表示的にはフルスクリーンにならずにその場で再生されます。 タップをすると再生、もう一度タップで停止。 便利なのは、HTML5のおかげか、再生中と停止中の状態をJSで取得できることですね。 なのでif文でPlayかPauseかを判断することができるわけですよ。 このことに気づくまで3時間ぐらい掛かりました。 オイオイオイ死ぬわ俺とか思いながらやってましたよ？ Chromeのダウンロードボタン Chromeは標準のメディアプレーヤーに、56？ぐらいからダウンロードボタンがつきました。 それをクリックすることで簡単に動画を落とすことができます。 クソ仕様です、クソ仕様。 何がクソって、そういうのは基本的にしてほしくないからです。 そもそもいらねえでしょ、そんな機能。 まあそんな文句ばかりは言えないので、対処のお話です。 何やら調べてみると、 ・CSSでwebkitを用いてダウンロードボタンを消滅させる（無理やり消失） ・ver58から、videoタグにcontrolListだかでnodownloadを指定すると消えるようになった の二通りがあるようです。 後者はすごく便利ですが、なんと58系のChromeからしか適用されません。 それにしたって57以下はコンマ以下の％の人間しか使ってないから問題ないんですけどね。 で、「だったら付けて解決じゃねえか」って思うかもしれませんが、そうは問屋が卸さない。 ここに使っていたプラグイン、Lity.jsが立ちはだかります。 という本題に入る前に、ついでのお話。 もう一つの指示があって、それは右クリックを禁止するというものです。 いくらダウンロードが消えたといっても、右クリックされるようでは簡単にダウンロードはされます。 開発者ツール開かれたら簡単に落とされますけど、そこまでする人間はそういない。 右クリック禁止のやり方については調べてください。 この2点、 ・nodownloadかwebkitでボタンを消す ・右クリックを禁止する ということをしようとするとLity.jsが邪魔するわけです。 何が邪魔かって、クリックするまではそのオブジェクトが存在しないんです。 最初は ってあるんだからbodyかvideoにかけりゃええやろって思いました。 webkitだってvideo::webkit～でなんとかなるやろって思いました。 はい違います。 ぼくも良くは知りませんが、Lity.jsは画面内でiframeとbodyを生成するんですよね。 要は別画面を生成して、その中に動画をcolorbox化して読み込むみたいな？ 読み込まれるのは標準プレーヤーなんですが、iframe内のせいでJSをが入り込めません。 なんていうか、iframeの中をJSを操作することってできないらしいです。 CSSは理由がよくわからん。 要は、生成されてないんだからそのDOM操作できねえよバーカ！ iframeだからJSで疑似要素を操作することもできねえよアーホ！ って感じでハマりました。 助けてもらって解決しましたが。 解決案は、Lity.jsを使用するために付けるdata-lityを利用すること。 これを持ったDOMをクリックするときにfunction()して色々やります。 クリック関数になるので、生成されたiframe内からvideo要素を取得。 そこらへんで右クリック禁止したり、removeAttributeしたり、setAttributeしました。 という感じで解決。 氏ねって思ったのはLity.jsが想像以上に難解な仕様をしてくれたからです。 素直にHTML上で設置したvideoタグを使えって思いますよほんとに。 なにはともあれ、お陰様でダウンロードボタンを消すこともできました。 もーまんたい！もーまんたい！ ほとんどぼくの力じゃないけど！！ もうこんなんはコリゴリだよ、氏ね。 それでは今日はここらでサヨウナラー

自分の力での解決は不可能でした 今週はハマりごとが大量にありましたけど、クソ面倒だったのは多分今日。 動画周りのお話です。 備忘録代わりに書きますが、詳細な技術面の話は一切しません。 自分で理解できてないことが多いし、再現しろと言われてもできないからです。 HTML5からなのかは知識不足で知らないけど、videoタグがありますよね。 直接mp4とかの動画を埋め込んでくれる便利なやつです。 その辺で大分やられました、主に5時間ほど。 今日やろうとしたのは、動画の埋め込み。 やったこととハマったことは以下の通り。 ・動画を埋め込む、埋め込みにはLity.jsを使う Lity採用理由：colorboxがクソダサだからもっとシンプルなやつっていう指示 ・Chromeはvideoタグにダウンロードボタンが付いたのでそれを削除 理由：多分ダウンロードをされたくないから、Chrome氏ね ついでに右クリックも禁止、ダウンロードされるから ・PC／Android／iPhoneすべてで問題なく見れること 理由：それなりにデカイ案件だったし、そもそもその三機種で見れるのは最低条件 主に下2つでハマりました。 とりあえずまずは一番下のやつから Android PCとiPhoneは問題なく見れたんですよね。 前者はLityのボックスで、後者はフルスクリーンで。 んだけども、なぜかAndroidは見れないわけですよ。 色々と調べてみると、どうやら4系は標準メディアプレーヤーがゴミカスな模様。 Lityで頑張って出そうとするのになぜかダウンロードをしはじめる始末です。 そのくせただvideoタグで埋め込むだけだと再生ボタンすら表示させないというクソ仕様。 誰だよAndroid4系を開発したのは、開発者出てこい。 仕方がないので、Androidに関してはJSで対処しました。 やったのはPlay()とPause()を交互に繰り返すこと。 　（多分書き方は合ってる） って感じで、videoにidを振って、クリックしたときに関数を呼びました。 JS側では function play_movide() { } みたいな感じで作った関数の中で、 ・クリックされた要素のidを取得 ・それがPlay中ならPause() ・それがPause中ならPlay() ってのをやっただけです。 Androidくんの場合だけで適用され、表示的にはフルスクリーンにならずにその場で再生されます。 タップをすると再生、もう一度タップで停止。 便利なのは、HTML5のおかげか、再生中と停止中の状態をJSで取得できることですね。 なのでif文でPlayかPauseかを判断することができるわけですよ。 このことに気づくまで3時間ぐらい掛かりました。 オイオイオイ死ぬわ俺とか思いながらやってましたよ？ Chromeのダウンロードボタン Chromeは標準のメディアプレーヤーに、56？ぐらいからダウンロードボタンがつきました。 それをクリックすることで簡単に動画を落とすことができます。 クソ仕様です、クソ仕様。 何がクソって、そういうのは基本的にしてほしくないからです。 そもそもいらねえでしょ、そんな機能。 まあそんな文句ばかりは言えないので、対処のお話です。 何やら調べてみると、 ・CSSでwebkitを用いてダウンロードボタンを消滅させる（無理やり消失） ・ver58から、videoタグにcontrolListだかでnodownloadを指定すると消えるようになった の二通りがあるようです。 後者はすごく便利ですが、なんと58系のChromeからしか適用されません。 それにしたって57以下はコンマ以下の％の人間しか使ってないから問題ないんですけどね。 で、「だったら付けて解決じゃねえか」って思うかもしれませんが、そうは問屋が卸さない。 ここに使っていたプラグイン、Lity.jsが立ちはだかります。 という本題に入る前に、ついでのお話。 もう一つの指示があって、それは右クリックを禁止するというものです。 いくらダウンロードが消えたといっても、右クリックされるようでは簡単にダウンロードはされます。 開発者ツール開かれたら簡単に落とされますけど、そこまでする人間はそういない。 右クリック禁止のやり方については調べてください。 この2点、 ・nodownloadかwebkitでボタンを消す ・右クリックを禁止する ということをしようとするとLity.jsが邪魔するわけです。 何が邪魔かって、クリックするまではそのオブジェクトが存在しないんです。 最初は ってあるんだからbodyかvideoにかけりゃええやろって思いました。 webkitだってvideo::webkit～でなんとかなるやろって思いました。 はい違います。 ぼくも良くは知りませんが、Lity.jsは画面内でiframeとbodyを生成するんですよね。 要は別画面を生成して、その中に動画をcolorbox化して読み込むみたいな？ 読み込まれるのは標準プレーヤーなんですが、iframe内のせいでJSをが入り込めません。 なんていうか、iframeの中をJSを操作することってできないらしいです。 CSSは理由がよくわからん。 要は、生成されてないんだからそのDOM操作できねえよバーカ！ iframeだからJSで疑似要素を操作することもできねえよアーホ！ って感じでハマりました。 助けてもらって解決しましたが。 解決案は、Lity.jsを使用するために付けるdata-lityを利用すること。 これを持ったDOMをクリックするときにfunction()して色々やります。 クリック関数になるので、生成されたiframe内からvideo要素を取得。 そこらへんで右クリック禁止したり、removeAttributeしたり、setAttributeしました。 という感じで解決。 氏ねって思ったのはLity.jsが想像以上に難解な仕様をしてくれたからです。 素直にHTML上で設置したvideoタグを使えって思いますよほんとに。 なにはともあれ、お陰様でダウンロードボタンを消すこともできました。 もーまんたい！もーまんたい！ ほとんどぼくの力じゃないけど！！ もうこんなんはコリゴリだよ、氏ね。 それでは今日はここらでサヨウナラー