« 青空 | トップページ | BD-RE »

2021年2月18日 (木)

GIFをクリックで再生

久しぶりの氷点下の朝。

めっちゃ寒い!

でも、日中はいい天気だった。
午後からは曇りになったけれど。

 

GIFって、貼り付けているページが表示されると、再生が始まってしまう。
一番最初から観てほしくても、再生は始まってしまっているので、途中から観てもらうことになってしまうかもしれない。

よって、プレーヤーが用意されているMP4のような動画ファイルのように、好きなタイミングで再生というのが出来ない。

任意のタイミングでGIFを再生することは出来ないのだろうか?GIFをクリックで再生出来ないだろうか?と思って調べてみたら、あるんだねぇ。

Javascriptの「freezeframe.js」 というライブラリーがそれ。

GitHub - ctrl-freaks/freezeframe.js: freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions.

GIFをクリックして、再生・停止、マウス・オーバーすることによって、再生・停止、別途再生・停止ボタンを用意して、再生・停止、なんていうことが出来る。

導入もそれほど難しくないので、いいんじゃなかろうか。

他には?と思って調べてみると、もっとお手軽のものがあった!

GIFアニメーションは直接貼り付けずJavaScriptで再生させる | iwb.jp

別途、静止画を用意しないといけないけれど、Javascriptを1行足すだけで、クリックで再生が出来てしまう!

これはすごいなぁ、と思った。

ただ、これだと、1度クリックすると、その後はループ再生するので、「freezeframe.js」のように、停止させることは出来ない。

そこで、僕の方で追加で、停止も出来るようにしてみた。

用意するものは、GIFとその静止画サムネイル。仮に、「a.gif」「a.jpg」としておく。

残念ながら、このBlogでは、Javascriptの挿入は出来ないので、サンプルは出せない。

その代わり、ソースを残しておく。

<body>

<src="a.jpg" onclick="PlayStopGif(event, '.jpg');" style="cursor: pointer;" />

<script type="text/javascript">
<!--
function PlayStopGif(event, replaced) {
  var et = event.target;
  var srcname = et.getAttribute('src');
  var reg = new RegExp(replaced);
  if (reg.test(srcname)) {
    et.setAttribute('src', srcname.replace(reg, '.gif'));
  } else {
    et.setAttribute('src', srcname.replace(/.gif/, replaced));
  }
}
//-->
</script>

</body>

ページが表示された時は、「a.jpg」を表示しておく。
それをクリックすると、PlayStopGif()という関数に「.jpg」という引数を渡し、「src」の値の中に、つまり、ファイル名に「.jpg」が含まれていれば、「.gif」に置き換え、そのGIFの再生が始まる。

もう一度クリックすると、「.gif」から、静止画の「.jpg」に置き換えている。

「.jpg」を引数にしている理由としては、汎用性を持たせるため。

例えば、ファイル名が「a1.jpg」「a2.jpg」・・・というものがあったとすると、引数に「1.jpg」「2.jpg」を渡せば、「a.gif」に置き換えてくれる。

そんなことしないというのであれば、関数の中で、「.jpg」を置き換えするようにすればいい。

でも、「.png」にしたい時もあるかもしれないので、こういうやり方の方がいいかもしれない。

これが、第一弾。

もう少しわかりやすくするために、こういうのはいかが?

動画のサムネイルに再生ボタン「▸」が表示されているのがある。

それと同じように、こういう感じにしてみる。

静止画を作る時に、こういう文字を埋め込んでおいてもいいけれど、せっかくなので、HTMLとCSSで実現。

<head>
<style type="text/css">
.container {
  position: relative;
  width: 600px;
}
.container span {
  position: absolute;
  color: white;
  font-size: 10em;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0.5;
}
.exp {
  font-size: 1.9em;
  color: #ddd;
  top: 65%;
}
</style>
</head>

<body>

<div class="container">
<img src="a.jpg" onclick="PlayStopGif(event, '.jpg', '.container span');" style="cursor: pointer;" />
<span class="playb">▸</span>
<span class="exp">クリックで再生/停止</span>
</div>

<script type="text/javascript">
<!--
function PlayStopGif(event, replaced, containername) {
  var et = event.target;
  var srcname = et.getAttribute('src');
  var reg = new RegExp(replaced);
  if (reg.test(srcname)) {
    et.setAttribute('src', srcname.replace(reg, '.gif'));
    OnOffLetters(containername, "none");
  } else {
    et.setAttribute('src', srcname.replace(/.gif/, replaced));
    OnOffLetters(containername, "inline");
  }
}

function OnOffLetters(containername, value) {
  var cn= document.querySelectorAll(containername);
  for(i=0; i < cn.length; i++) {
    cn[i].style.display = value;
  }
}
//-->
</script>

</body>

新たに加えたのは、その文字を設定しているCSSとOnOffLetters()という関数。
この関数に、Class名を引数として渡し、クリックした時に、「display」を「none(非表示)」にしたり「inline(表示)」にしたりしている。

こうすれば、静止画をクリックすると、それがGIFに挿し変えられ、また、文字が消える。
もう一度クリックすると、GIFが静止画に挿し変えられ、文字が現れる。

1行のJavascriptから、結構行数は増えたけれど、「freezeframe.js」よりははるかに軽量だ。(笑)

1枚別途、静止画を用意する必要性はあるけれど、これで、GIFを好きなタイミングで再生・停止することが出来るのである。

|

« 青空 | トップページ | BD-RE »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




« 青空 | トップページ | BD-RE »