2015年10月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

videoタグでonclick="this.play()"つけるとfirefoxで動かなくなる

なにこの問題。

html5動画でvideoタグ設置していた。

<video id="video" poster="poster1.png" controls preload="none"> 

でもこれだとコントローラーの再生ボタンを押さないとスタートしないので、onclick="this.play"をつけるよね?

<video id="video" onclick="this.play()" poster="poster1.png" controls preload="none"> 

これで画面クリックでも再生が始まる。

と思ったら

たらfirefoxで動かなくなった。

よくよく調べてみると、firefoxでは、this.play()しなくても画面クリックで再生&停止が機能してる。
なるほど、すでにfirefoxでは勝手に便利機能が搭載されていて、それであるがゆえに、クリックすると2重で動き出してバグるみたいな?

んで、結局これで解決↓

<video id="video" onclick="this.play();return false;" poster="poster1.png" controls preload="none"> 


return false; をいれて、クリックがブラウザに届くのを防ぐみたいな。

 
どこにも解決策がでてなくて、stackoverflowとかでも外国の方が困っててだれも解決できてないようにも見えたけど、一応これで僕の環境ではうまくいってる。 

videoタグで設置した動画が再生された回数をアナリティクスでカウントする

サイト内にvideoタグで設置した動画が再生された回数をgoogle analyticsでカウントする。

 gaのトラッキングをonplayで呼び出せばOKらしい。

こんな感じ。

<video id="video" onclick="this.play()" onplay="ga('send','event','category','action')">
<source src="video.mp4" type="video/mp4">
</video> 

ga()の中身については、前回の記事で書いた。
グーグルアナリティクスのイベント計測

 

ただ、これだと再生のたびにカウントされちゃう。

再生→一時停止→再開→一時停止→再開

ってやると3カウントされちゃう。

なので、最初の1回だけしか再生しないようにしちゃうという手っ取り早い方法

<HTML>
<video id="video" onclick="this.play()" onplay="trackMoviePlay()">
<source src="video.mp4" type="video/mp4">
</video>
<js>
var isPlay = false;

function trackMoviePlay(){
if(isPlay == false){
ga('send','event','category','action');
isPlay = true;
}



ただ、ページを更新するまで、ほんとに何度再生してもカウントは1しか進まないという問題はあるけど。


※あれ、endイベントでisPlay = falseに戻せばいいかな?だれか教えて。
 

onclickでgoogle アナリティクスのイベント計測する

普段あまりアナリティクス関連やらないので調べた。
詳しいことは他のサイトにも載ってるので、最短でコピペできるようにしておく。

呼び出すのはこれ

ga('send','event','category','action')

sendとeventまでは決まり文句でこのまんま書かなきゃだめ。
categoryとactionは計測されるときの集計につかうので好きな文字列をいれる。

ga('send','event','link','click')
 
とかいう風にね。
ほんとはもっと引数あるけど最低限でいいので必須以外は省略。


呼び出し方はこう。

<a href="#" onclick="ga('send','event','link','click')">こちら</a> 

aタグに直で書くときはonclick内に記載しちゃう。

クリックイベントをjs側で制御してる場合はこう。

$('.btn').click(function(){
ga('send','event','link','click');
}) ;


どこをクリックしたのか分けて取得したいよね。
って時はidをつけておいてそのidを送っちゃうのもあり。

こう。


<html側>
<a href="#" class="btn" id="btn1">にゃん</a> 
<a href="#" class="btn" id="btn2">みぃみぃ</a> 
<a href="#" class="btn" id="btn3">フギャー</a> 
<a href="#" class="btn" id="btn4">ゴロゴロ</a>


<js側> 
$('.btn').click(function(){
var btnName = $(this).attr('id');
ga('send','event',btnName,'click');
}) ; 


こんな風にすれば別々で計測できる。


ところで調べていると
_gaq.push([xxxxxxxxxxxxx])
みたいな書き方が出てきて混乱するけど、これは古い方の書き方らしいので今は

ga('send','event',,,,,)のほうね。


 

オリジナル画像tweetボタン内のリンクurlに#(ハッシュ)をつける(twitterのハッシュタグではなく)

意外に検索してもなかなか出てこない。

 オリジナル画像を使ったツイートボタンはこの方のブログがわかりやすいのでリンク
http://edge.sincar.jp/web/original-tweet-button/ 

 これを使ったんだけど、tweet内に表示するリンクurlに#(ハッシュ)がついているurlははじかれてしまうようだった。

http://twitter.com/share?text=サンプルだよー&url=http://sample.com#nyaonyao

っていうツイート文を作ると、、開いた時に

サンプルだよー http://sample.com

となってしまう。
#nyaonyaoの部分が勝手に削除されてしまうんだな。

ツイートボタンにはhashtagsというパラメータもつけられるようになっているけれどそれはツイッター上でのタグ付け機能のためのものであって、リンクにつけるハッシュじゃない。


じゃぁリンクにつけるハッシュはどうしたらいいのー!って調べて英語サイトのほうにいったら、

#ハッシュは%23という文字列でエンコードされる 

 という文章を発見。なるほ。

ということでいろいろやった結果以下のようになった。

コピペで使ってください。

//■ツイート
$('.tweetBtn').click(function(){
var file = 'http://twitter.com/share?text=【ツイート文】&url=http://sample.com%23nyaonyao';
window.open((file), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1');
return false;
});

 <a href="#" class="tweetBtn"><img src="オリジナル画像"></a>

をクリックするとpopアップでツイート画面が開くっていう寸法だね!

%23 → # におきかわって

ツイート画面では

【ツイート文】
http://sample.com#nyaonyao

となるよ!

※1つ注意点は元のサイトさんのほうで紹介されているスクリプトの
window.open(encodeURI(decodeURI(this.href))〜〜

の部分。
デコードしてエンコードしてっていうのをいれると今回の場合、%23がそのまま%23という文字列で表現されちゃうので、トリましたよ。


 サワディーカップ!

mp4とgifアニメがandroidやiphoneでちゃんと表示されるか調べた

そういうサイトがなにげに見つからなかったので調べたよ。

スマホサイトを作っていて浮かんだ疑問1
「そもそもgifアニメってandroidでもiphoneでも動くんだっけ?」


サンプルを作ってみたのでいろいろな端末でみてみよう


 ■結論
実験の結果、htmlに貼り付けた状態のgifアニメは、、
iOS8のsafari → ちゃんと動く
Android2.3ブラウザ(AQUOS phone) → ちゃんと動く
Android4.1のブラウザ(Galaxy S3) → ちゃんと動く

※その他の端末は 見てないごめんね。


スマホサイトを作っていて浮かんだ疑問2
「mp4ファイルにリンクを張った場合、androidやiphoneではどういう処理になるんだっけ?」 



上記のサンプルのページの一番下にある、mp4へのリンクをクリックしてみる。

■結論
iOS8のsafari → その場で動画が再生される。ローカル保存はできない。
Android2.3ブラウザ(AQUOS phone) → 開くアプリを選べる。デフォはその場で再生。
Android4.1のブラウザ(Galaxy S3) → デフォは「マイファイル」に保存される。

ここはなにげに端末やOSによって動きがわかれたぞ!気をつけろ!!


 
 スマホサイトを作っていて浮かんだ疑問3
「じゃぁmovファイルならiphoneで保存させられる?」 



mp4だとその場で再生が始まるだけというのはわかった。そんじゃぁ、movファイルへリンクを貼ればiphoneでもカメラロールに保存させるページが作れるのかな?

■結論
できない。
長押ししたりいろいろやってみたけど、movファイルでも再生されるだけで保存はできない。

なにかアプリを導入せずに動画ファイルをローカルに保存させることはiphoneではできないみたいね。


 
 スマホサイトを作っていて浮かんだ疑問4
「gifアニメなら保存させられる?」 



mp4動画はあきらめよう。代わりにgifアニメならローカルに保存させられるのかな?
さっきのサンプルに貼り付けたgifアニメを長押しして保存してみたよ。

■結論
iOS8のsafari → カメラロールに保存できるが、カメラロール内ではgifアニメは動かない。
Android2.3ブラウザ(AQUOS phone) → ローカルに保存されるがローカルではgifアニメは動かない。
Android4.1のブラウザ(Galaxy S3) → 「マイファイル」に保存される。ローカルでも動く。


難しいねぇ。

以上、スマートフォンの動画周りの挙動調査でした。 

失礼します! 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ