<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KRS8CM');</script>

[Vue.js]YouTubeの動画をダラダラ流すサイトを作りました


YouTubeの動画を検索して流し続けるサイトはいくつかありますが、どうも機能的にミュージックビデオに特化しているところが多いようです。
音楽って聴き続けると意外に疲れるので、自分の場合は、耳障りのいい人の声……しかも鳴ってるだけで聞いても聞かなくてもいい昔のCMの動画とか……をBGVにしたいのですが、微妙に使い勝手が合いません。
そこで、Vue.jsの練習も兼ねて、YouTubeの動画を検索して自動再生し続けるだけのサイトを作りました。

YTEZPlay.com

もう見えている以上の機能はありません。
ウィンドウを閉じるときに確認してくれる機能はどうしても欲しかったので、それだけは余分に付けました。
YouTubeのAPIに検索語と件数を投げて、返ってきたJSONを、Vue.jsのインスタンスにわたして一覧表示しています。
View部分を丸投げしているので、元のコードがとても短くなりました。
Vue.js楽で楽しいですね。とりあえずやってみるだけならものすごく簡単。


<script type="text/javascript" id="zsiqchat">var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq || {widgetcode: "siq61aecceb7ad0c24af4e4670187f03564ddd615eb71422e1b7169309fa9b25e89", values:{},ready:function(){}};var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;s.src="https://salesiq.zohopublic.com/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);</script>