GIFをクリックで再生
久しぶりの氷点下の朝。
めっちゃ寒い！
でも、日中はいい天気だった。
午後からは曇りになったけれど。
GIFって、貼り付けているページが表示されると、再生が始まってしまう。
一番最初から観てほしくても、再生は始まってしまっているので、途中から観てもらうことになってしまうかもしれない。
よって、プレーヤーが用意されているMP4のような動画ファイルのように、好きなタイミングで再生というのが出来ない。
任意のタイミングでGIFを再生することは出来ないのだろうか？GIFをクリックで再生出来ないだろうか？と思って調べてみたら、あるんだねぇ。
Javascriptの「freezeframe.js」 というライブラリーがそれ。
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を好きなタイミングで再生・停止することが出来るのである。
| 固定リンク
「パソコン・インターネット」カテゴリの記事
- ようこそ、ニフティーサーブへ(2022.06.22)
- 大変だ(2022.06.19)
- 何だった(2022.06.16)
- 無事完了(2022.06.07)
コメント