スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

文字をクリックすると動画を表示するプログラムの自動作成フォーム 【JavaScript】

更新日2014/3/21  <更新内容>
1.動画URLのフォームに動画IDを指定するのではなく、URLをいれたら動画IDを抽出するプログラムを作成し埋め込み
  つまり、いちいち動画IDだけをコピーしなくてよくなり、URLを全部コピーして貼り付けるだけで完成しちゃう
2.動画タイトルが長いと1行で収まり切らないので、2行のtextareaに変更
3.textareaの右下のマークが不要なので、cssでtextareaのサイズを固定
4.動画URLをクリックすると全選択する様に変更(一度URLを入力してボタンを押すと、
  次のURLを入力する時に支障が出るのでクリックしたら全選択し、CTRL+Vですぐに作業が出来る。
5.動画URLにURLを入れると自動的に動画タイトルが抽出される様に変更
  Javascriptタイマーイベントを使用し、動画URLの値を0,001秒感覚でチェック
  動画URLが入っていれば、動画URLから動画タイトルを抽出するプログラムを実行
  Google chromeで対応、IEは自動的にURLからタイトル抽出不可
6.リセットボタンの設置

動画URL 動画タイトル      コピー(Ctrl + C)    

【東方vocal】GIRL MEETS GIRL カラオケ字幕  【ボタン】
【東方vocal】GIRL MEETS GIRL カラオケ字幕  【自動再生】
【東方vocal】GIRL MEETS GIRL カラオケ字幕  【自動再生+ループ再生】
【東方vocal】WORLD BEYOND カラオケ字幕  【ボタン】
【東方vocal】WORLD BEYOND カラオケ字幕  【自動再生】
【東方vocal】WORLD BEYOND カラオケ字幕  【自動再生+ループ再生】



当ブログ以外でこのプログラムを動かす方法
<iframe name="src" width="640" height="360" src="" frameborder="0" allowfullscreen=""></iframe>
1.↑のコードをコピーして貼り付け
2.一番上のフォームで動画URLを貼付けると動画タイトルを自動取得(chromeで動作確認)動作しない場合、自分で入力
3.【ボタン】を押すと、文字をクリックしたら動画が表示されるだけのコードを作成
 【自動再生】を押すと、文字をクリックしたら動画が自動再生されるコードを作成
 【自動再生+ループ再生】を押すと、文字をクリックしたら動画が自動再生されループ再生されるコードを作成

このプログラムのメリット
文字をクリックすればすぐに動画を再生させる事が可能なので、作品ごとに曲をまとめたり。
検索の手間が省ける、自動再生、ループ再生指定も可能。
動画埋め込みパラメーター
?autoplay=1  自動的に動画を再生
?loop=1&playlist=動画ID  繰り返し再生
?rel=0  再生後に表示される関連動画を表示させない
?vq=値  動画の画質を指定して再生
・hd1080・hd720・large・medium  値
「?」は第一設定の追加。以降は「&」で設定追加
繰り返し再生を適用したら関連動画は表示しないので、rel=0は不要
関連記事
スポンサーサイト

コメントの投稿

非公開コメント

アクセスカウンター
現在の閲覧者数:
プロフィール

GOTOUkun510

Author:GOTOUkun510


【自己紹介】
年齢:21(2016年現在)
pc使用歴:6年

【好きな物】
東方vocal、タイピング、小学生、抱き枕


【好きな人・キャラ】
ななひら、3L、高橋菜々、チルノ、レミリア

ハマってるゲーム
ps3 COD bo キルレ2.53、33万k13万d、プレイ時間71日
id:gotoukun510

タイピングマニア、TypingTube、ニコ生タイピング、曲製作してます。

【高校生で取った資格】
情報処理技術者試験ITパスポート

毎日パソコン入力コンクール二段
2012/6月大会高校生和文B
全国13位(11673人中13位)
高校3年生で全国7位

日本情報処理検定協会8冠達成
パソコンスピード英文1級
毎日パソコン入力コンクール 二段
パソコンスピード日本語 初段
情報処理技能検定 データベース1級
情報処理技能検定試験 表計算1級
プレゼンテーション作成検定 1級
ホームページ作成検定1級
文書デザイン検定1級
日本語ワープロ1級
パソコンスピード日本語1級
毎日パソコン入力コンクール1級
情報処理技能検定データベース2級
パソコンスピード英文2級
情報処理技能検定ビジネス部門2級
ワープロ2級
ホームページ作成検定2級
文書デザイン検定2級
パソコンスピード検定3級
情報処理技能検定表計算3級
文書デザイン検定3級

最新記事
最新コメント
リンク
カテゴリ
アクセスランキング
[ジャンルランキング]
ブログ
2675位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
772位
アクセスランキングを見る>>
月別アーカイブ
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。