[設定] Dailymotion動画のブログ貼り付け
Dailymotion貼り付け・カスタマイズ
2011-05-16 00:00:00
テーマ：アメブロカスタマイズ
僕は以前からBLOGで利用している共有動画サイト「Dailymotion（デイリーモーション）」はWikipediaで調べるとフランスの共有動画サイトで、実はあの一番認知の高いYOUTUBEより1ヶ月先に開始されたと書いてある。
$PARANOIA TRAINの日々
知ってる方は多いと思うけどYOUTUBEの様に貼り付けをしてる記事をほとんど見かけたことがない。
なので、今回はDailymotionをアメブロに貼り付ける方法と細かいカスタマイズについて書こうと思う。
先に断っておくけどiPhoneで通常アメブロを見ると映像は反映されないので要注意。
iPhoneで見たい方はDailymotionのアプリでダウンロードすると見れるけどBLOGには反映されないので単体で閲覧可能。
$PARANOIA TRAINの日々
iPhone・iPad専用「Dailymotion」アプリ。
画面はこんな感じでYOUTUBEの時と使用方法はほぼ一緒。
$PARANOIA TRAINの日々
多分、Wi-Fi環境でないと画像が停止しやすいのが難点。
■PC版での貼り付け
ではPCの方のDailymotion（デイリーモーション）を説明したい。
まずサイトの「Dailymotion」 をリンクしてあるので選択すると先ほどの画面が現れる。
右上にログインがあるがログインしなくてもBLOGに貼り付けはできる。
ただネタとしてストックしたい方はアカウントを取りフォルダー分けした方が便利。
まずは画面上のカテゴリーを選択するとジャンルが下の様な画面で出てくる。
画面全てに映ってないが各ジャンルごと紹介されていて右横にはカテゴリーがあるのでそちらからも選択することもできる。
カテゴリーの中から今回は「動物」を選択。
選択すると動物映像が沢山出てくる。
では、ここの画面から左上から2番目のサメの映像を選択。
カテゴリーとかでもそうだが一番最初にアップされてる画像はアクセス数が多い映像になる。
選択するとこの画面になる。
画面右上の赤く囲んだ「Export」を選択すると画面中央に3つアイコンが表記される。
一番左側の「emded]を選択。
そうするとこの画面が表示され既にコードをコピーされたことになる。
それをアメブロに右クリックで貼り付けを選択すると先のコードが記事を書く部分に貼られる。
これは一番簡単な貼り付け方だが画面を見ると横幅が480pxで縦が270pxになってる。
この数字を自分でサイズ変更をここからすることもできる。
また、この状態で貼るとこうなる。
僕のBLOGはカスタムしてあるので横幅が590pxになる。要するに110px分の横幅に空きが生じる。
また画像下にも投稿者等のリンク文字が出て気になる。
以前までは貼り付けたコードのピクセルを自分で打ち直し、リンク先の下の部分のコードを自分で消して貼っていた。
■便利なツール
それから偶然発見。更に便利なツールがあったので、それを説明したい。
先ほどのジョーズ画面の下に「埋め込む」ボタンがある。
選択すると下の「埋め込みプレイヤーをカスタマイズする」画面が現れサイズ変更が可能になる。
画面に一番右は自分で横幅を半角英数で入力するとBLOGの横幅に適したサイズに変更可能。
まずは左下のチェック項目を外さないと貼り付けできないので注意！
入力しても左下のコードの数字が変更されない場合は「色」を選択すると反映されたりする。
そして先の動画下にリンク文字もここから選択して消すことが可能。
「他のオプション」を選択する。
画面の一番上の「ページ動画情報を隠す」を選択するとこうなる。
一番最初に教えた簡単な貼り付けだとこうなる。
Hey Alan,Alan, Alan, Alan,Alan,Alan... 投稿者 vanadio0
サイズも違うし下にリンク文字が表記され再生ボタンも一番ノーマルになる。
先の「埋め込む」を選択し「埋め込みプレイヤーをカスタマイズする」の中で色とサイズ、また「ページ動画情報を隠す」と「他のオプション」から
「プレイヤーの動画情報を隠す」にチェックを入れるとこうなる。
再生ボタンのみ表記されカスタムした色は反映される。
ちなみにこれは横幅320pxに色は「スレイヤー」を選択した場合。
アメブロではYOUTUBE同様、普通に埋め込み可能な共有動画サイトなので利用するに関して大変便利なサイト。
先の「埋め込みプレイヤーをカスタマイズする」場合、あることを忘れると記事のプレビュー押してもこの画面になる。
「不正な文字が入力されてますのでプレビューできません」
この場合、まずほとんどがここにチェック項目が入ったままになっている。
毎回画面を変更したりして再度コピペしようとすると自動的にチェックが入ってるので必ず確認し外してから行なうことが一番重要な部分。
あと色を変更してもカスタマイズの画面で色が変わらなかったりピクセルの変更が反映されない場合は一度画面を閉じ、再度「埋め込む」ボタンを押してから行うと反映される。
DailymotionはYOUTUBEでUPされてない動画もたくさんあり、また日本の映像も結構UPされてたりするので使い用途は結構あり便利。
簡単なので是非、アメブロの方はチャレンジしてみて下さい。
iPhoneの方には申し分けないですがBLOGでは見れないのでタイトルだけ別で控えて、先のiPhone専用アプリのDailymotionでご覧下さい。
あとサブBLOG「SUPER BARBARIAN的な日常生活」も宜しくです。
（バナーをクリックでBLOGに飛びます）
以上。
ベリサンキュ。
MUDAMUDA DAM
Daily Motion
https://www.dailymotion.com/eigamovie/videos
動画貼り付け テスト４
5月30日
dailymotion, vimeo, USTREAM等の動画を貼り付けるプラグイン（その１）
2016-06-07 23:45:44
テーマ：板野有紀さん以外のこと
■アメブロ環境ではYouTube以外ダメ？？
アメブロでは,YouTube以外の動画映画をブログBlogに貼り付けようとしても,
「保存ができませんでした。 ・ ・ ・ ・ ・
記事内容に禁止タグが入力されています。 ・ ・ ・ 」
などと,ブログ編集用エディタに言われてしまって,「YouTubeYouTube以外の」動画テレビを*amember*ブログに"貼り付け複写"することができない！「仕様??」になっていますよね。。。
ショック！ダメダメだぁ～ダウンダウン
「禁止タグ」保存エラーウィンドウ画面
※YouTube以外の動画を貼ろうとすると「エラー」となる画面。
なんでこんな「仕様」にするのか？？,
ワタクシには,さっぱり??ガーンはてなイミがわからないはてなマークのでありますが,．．．むかっ？はてな？
1これ↓は,dailymotion（ｄ デイリーモーション）動画の貼り付けコード（の一部）です。－－（１）
<iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/x2qavb8" allowfullscreen></iframe>
2そして,これ↓は,YouTube（YouTubeユーチューブ）動画の貼り付けコードです。－－（２）
<iframe frameborder="0" width="480" height="270" src="https://www.youtube.com/embed/dLIbpumy3mc?rel=0" allowfullscreen></iframe>
見てわかるとおり,
右矢印「 src="．．．" 」の部分（動画の"元ファイル"の在り処,ですね）が違うだけの,
コード内容!?メモとしては,ほとんど同じ（・・ってか,まったく同じ！）ものですよね。あはは。。。
なのに,．．．
（１）1の貼り付けコードは,「禁止タグ」エラーになって,「保存」（「下書き」も「公開」も）できず,
（２）2の貼り付けコードは,エラーにならずに,ブログに動画が「貼り付け」されます。
・・・ってことは,ようするに,あせ
アメブロアメーバのブログ編集エディタメモは（標準エディタでも,最新エディタも,どのエディタでも）,
<iframe> タグ
を「禁止タグ」にしていて,ブログ記事内容にこのタグが含まれていたら,エラーにして保存しないようにされているのです。が,
ただし,その場合に,「 src="．．．" 」属性の部分をみて,目 そのURLの「ドメイン部」が,
「//www.youtube.com」
である場合にのみ,保存フロッピー（青）を許可する,という「方針」をとり,わざわざそういう「本仕様」にして,ブログ編集エディタをそのようにマウスプログラムマウスしている,むっむかっ
――ということです！！！！
極端な話し,「src="．．．" 」のドメイン部が「//www.youtube.com 」でさえあったらイイ（動画ファイルでなくてもよい！）ので,
たとえば（１）の （エラーで保存できないdallymotion貼り付け用の） コードの「src=」部分を,↓
<iframe frameborder="0" width="480" height="270" src="//www.youtube.com" allowfullscreen></iframe>
と書き変えると,
「禁止タグ」エラーにならずにクラッカー,「下書き保存」することも,「公開」することもできます！！
(※もちろん,「動画」は表示されませんが,．．．)
＜iframe＞「禁止タグ」エラーにならない画面
※<iframe>タグの「src=」に「"//www.youtube.com"」と書くと「エラー」にならない画面。
・ ・ ・ これって,．．．汗汗
YouTubeYouTube以外の動画に対する差別とちゃいますの？？！？！？
アメブロアメーバがなぜ!?はてなマーク わざわざこのようなことをするのか？
・・理解に苦しみます。ｼｮﾎﾞ
おかしな「偏見」と「差別意識??」を感じずにはおれません！
アメブロの管理者？には,ぜひ,納得のいく説明をしてほしいものです。。。
━─━─━─━─━─
（・・もとい。）
「禁止されない＜iframe＞タグww」には,
他の属性（id とか,name とか,title とか・・）を指定することもできます。ニコニコ音譜
（ココ↑重要ですからね!!高校生）
・・・つまり,
ブログ記事中に,<iframe>タグが書けるのであれば,
（※src="//www.youtube.com"ですが．．．あせる）
あとは,スクリプト（＜script＞）で,
ページ表示の際にひらめき電球動的に<iframe>タグの属性を書き変えてやればいいわけ!!です。
あっあっ,もちろん<script>も「禁止タグ」です（ので記事中に書くことはできません）が,
これは,アメブロアメーバ「プラグイン」に書くことができます！！
■dailymotion等の動画を貼り付け可能にするアメブロ用JSプラグイン
――というわけで,
＜iframe＞タグで動画を貼り付けるタイプの「貼り付けコード」を用いている動画サイトの動画
＝ｄ dailymotionとか,
＝Ｖ vimeoとか,
＝U USTREAMとか,
＝．．．とか,
――は,アメブロ記事に貼り付けることができるようになります。
そのスクリプト↓ ：「dailymotion等の動画を貼り付け可能にするアメブロ・プラグイン」
＜!-- 動画貼り付け --＞
＜script type="text/javascript"＞
var s="";var aF=document.getElementsByTagName("iframe");var n=aF.length;for(i=0; i<n; i++){s=aF[i].getAttribute("title");
if((null!=s)&&(""!=s)){aF[i].setAttribute("src", s);aF[i].setAttribute("allowfullscreen","");
}}
＜/script＞
★ページのHTMLの中に,<iframe>タグがあれば,
そのタグ中の title 属性の値（文字列）を調べて,値が設定されている（空文字でない）のなら,その値をそのまま src 属性に上書きする,という処理を行なっているだけ,です。
★ついでに,allowfullscreen 属性を（決め打ちで）設定しています。
※アメブロの「標準エディタ」・「最新版エディタ」では,＜iframe＞タグ中の
allowfullscreen 属性（～動画をフルスクリーン表示に切り替えることができるようにする設定をする～）
が勝手に強制削除されてしまうことに対抗したものです。
「旧エディタ」「タグ編集エディタ」では,そのような挙動は行なわれないよう（かな！？）ですので,これらのエディタでブログ記事HTMLに書いたとおりに動作させたい場合は,その処理部分を除いた↓のスクリプトとなります。
＜!-- 動画貼り付け --＞
＜script type="text/javascript"＞
var s="";var aF=document.getElementsByTagName("iframe");var n=aF.length;
for(i=0; i<n; i++){s=aF[i].getAttribute("title");if((null!=s)&&(""!=s)){aF[i].setAttribute("src", s);
}}
＜/script＞
■設置のしかた （取扱説明書）
①上記スクリプト（２通りのいずれか１つ）をアメブロの「フリー・プラグイン」に設定します。
「プラグインの追加」画面は,
「ブログ管理」トップページ → 「設定・管理」 → 「プラグインの追加 」 にあります。
フリープラグイン追加画面
※プラグインの設置画面。
「フリープラグイン」のつまみをクリックするとあらわれる赤文字注意書きの下の入力欄に,
上記のスクリプト（いずれか１つ）をコピペします。
動画貼付スクリプトをコピペ
※スクリプトのコードをコピペ画面（１）。コピーして,．．．
コピーして,．．．
動画貼付スクリプトをペースト
※スクリプトのコードをコピペ画面（２）。・・ペースト。．
・・ペースト貼り付け。
〔保存〕ボタンを（忘れずに！）押します。
プラグインを保存した画面
※プラグイン追加の〔保存〕ボタンを押した画面。
以上で,「フリープラグイン」の設定は完了です。音譜
この段階で,「自分のブログを確認」しても,表示はなにも変わっていないはずです。
もし自分のブログのサイドバーなどに,ヘンな文字!?えっなどが表示されていたりしたら,「プラグインの設置」がうまくできていないということですから,やり直してください。
②ブログ記事にHTMLを埋め込みます。
dailymotionの動画を,ブログ記事に貼り付けてみます。
右矢印この動画 でやってみましょう。（コマーシャル注意！）
まずは,
動画で公開されている「埋め込みコード」を,ブログ編集エディタの「HTMLタグ表示」の画面にコピペ
します。
コピーして,．．．
デイリーモーション動画埋込コードをコピー
※デイリーモーション動画の「埋め込みコード」をコピペ（１）。コピーして．．．
エディタHTMLタグ画面にペースト貼り付け。
ブログ編集エディタHTML画面にコードを貼り付け
※デイリーモーション動画の「埋め込みコード」をコピペ（２）。
ブログ編集エディタHTML画面に貼り付け。．
エディタの「タグ非表示」画面（最新版エディタでは「通常表示」画面）に切り替えてみると,動画映画とキャプション・テキストが貼りついています。
（エディタの画面には貼りつくんですよね）
でも,このまま「下書き（保存）」しようとすると,「禁止タグが・・」となってしまいます。。
再び,HTML表示画面に切り替えて,．．．
この「埋め込みコード」の３行目以下は,キャプション・テキストを表示するためのものですから,
動画の表示には関係ありません。
はじめの２行＝「 ＜iframe ・・・ から,＜/iframe＞までの部分 」が,
動画の貼り付けに関する部分です。
＜iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/x2qavb8" allowfullscreen＞
＜/iframe＞
この「埋め込みコード」のうち,黄色のバックグランドカラーで示した部分（src="・・”）が,
「禁止タグ」エラーひらめき電球をまねいている（？！）箇所です。
この部分に,手書きでメモ修正を加えます。
以下↓のように,著者名書き変えます。
＜iframe frameborder="0" width="480" height="270" title="//www.dailymotion.com/embed/video/x2qavb8" src="//www.youtube.com" allowfullscreen＞
＜/iframe＞
元のコードの「 src= 」の部分を,「 title= 」と,上書き鉛筆書き変えしてしまい,
別途「 src="//www.youtube.com" 」というコードを挿入しますメモ（前後に半角スペースを入れる）。
・・・この記事のはじめからの
"長い前振り能書き"あせ！の意味がわかっていただけたでしょうか？！あはは。。。
標準エディタで編集中。。。
※標準エディタでデイリーモーション動画貼付用の編集。。。
ドキドキ「最新版エディタ」で編集中↓の画面．．．（上に同じ。。。）
最新版エディタで編集中。。。
※最新版エディタでデイリーモーション動画貼付用の編集。。。
この手書き修正を加えた後は,「下書き（保存）」も,「公開」も,
できるようになりますのです！！！！！！
「タグ非表示」（「通常表示」）に切り替えると,
以前はエディタ画面に表示されていた動画映画の場所が,"真っ白け"になってしまっていますが,心配ありません。
そのまま,保存し,公開して,はじめて「プラグイン」が働いて,ブログにデイリーモーションが貼りついています。ﾍ(ﾟ∀ﾟ*)ﾉ
※エディタ画面の「表示を確認する」画面では,
「プラグイン」が読み込まれないために,動画は表示されません。
このブログで,テストしてみた結果は,このページ左矢印 にあります。
・・・よかったら, やってみてください。
#YouTube#dailymotion#vimeo#USTREAM#動画#最新版エディタ
#標準エディタ#新機能#動画埋め込み#禁止タグ
勝手に応援するブログ
勝手に応援するブログ
「板野有紀」さんはもういません。
人身取引,性暴力,人権侵害,等などがない社会になることをのぞんでいます。
でも,ブログ筆者の立場は矛盾に満ちています。
勝手に応援するブログ
0 件のコメント:
コメントを投稿