imgのSRCをbase64で書き換え続ければ動画っぽくなるのですか?(o^^o)
2020-03-19 2020-03-24
imgタグのSRCにもbase64とか使えます
まぁそういうことです。
かいたまんまです。
<img class='mypicture' src='data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEB~~~
とか書けばよいのです。
さぁ、これをjavascriptで連続的に書き換えれば、動画っぽくなるんでしょうか?
jpegのbase64を作るには
『退屈なことはPythonにやらせよう』
に則り、jpegのbase64を作ります。
とりあえず5コくらい作って、連続で書き換えてみましょう。
import base64
import os
for w in range(5):
ww = str(w+1)
filename = os.path.abspath("a0" + ww + ".jpg")
filename2 = os.path.abspath("a0" + ww + ".b64")
with open(filename, "br") as f:
Q = f.read()
S = base64.b64encode( Q )
with open(filename2, "bw") as g:
g.write(('var a0' + ww + '="').encode("utf-8"))
g.write("data:image/jpeg;base64,".encode("utf-8"))
g.write(S)
g.write('";'.encode("utf-8"))
とりあえずこんな感じで、a01.jpg~a08.jpgを、a01.b64~a08.b64に変換します。
それでhtmlで読み込みます。
HTMLで読み込んで、、
って言ってもPHPですが、、
<!--
$uid = uniqid("",false);
-->
<script type="text/javascript" src="a01.b64?a=<?php echo $uid; ?>"></script>
<script type="text/javascript" src="a02.b64?a=<?php echo $uid; ?>"></script>
<script type="text/javascript" src="a03.b64?a=<?php echo $uid; ?>"></script>
<script type="text/javascript" src="a04.b64?a=<?php echo $uid; ?>"></script>
<script type="text/javascript" src="a05.b64?a=<?php echo $uid; ?>"></script>
<script type="text/javascript" src="a06.b64?a=<?php echo $uid; ?>"></script>
<script type="text/javascript" src="a07.b64?a=<?php echo $uid; ?>"></script>
<script type="text/javascript" src="a08.b64?a=<?php echo $uid; ?>"></script>
javascriptで回してみましょう
setInterval(function(){
var str = "";
CT++;
if(CT > 8) CT = 1;
switch(CT){
default:
case 1: str = a01; break;
case 2: str = a02; break;
case 3: str = a03; break;
case 4: str = a04; break;
case 5: str = a05; break;
case 6: str = a06; break;
case 7: str = a07; break;
case 8: str = a08; break;
}
$(".mypicture").attr("src",str);
},100);
結果
あとがき
まぁこんなとこでつまづくわけもないとは思ってたけど、
変にフラッシュしたり画面がガタつくこともなく、普通に表示できました。
もちろん、これをさらにWebSocketやtcp/ipでやろうっていうわけだから、
まぁUDPでもいいけど、、
問題はそこですね。
では、そのとき考えましょう。
とさっ。
どんとはらい(o^^o)