online の swf player を作ろうとして果てた話

完遂しなかったが自分用途には耐えてしまったので、という切ないネタ。

2つ前1つ前の、話としては続き(ディスク整理)ではあるんだけれど、これはほんと「アタシだけの事情」と思われる。

このサイトで動画で何かを伝えるのに、最近は全部普通に youtube にアップロードして済ませている。けれど始めた当初は Jing を使って SWF にして、このサイトにファイルとして置いていた。「簡単にダウンロード出来るように」というのが意図だったけれど、まぁ youtube からのダウンロードの仕方を紹介してはいるしな、まぁいいか、てことで方針を変えたんである。

そのサイトにアップロードする前の SWF がなぜか結構残ってて。消せばいーのに。

ただ、中身を見ずに捨てるのも気分が悪いものがあって、一度は再生してやりたい、と思うわけなんだけれど、スタンドアロンのプレイヤーなんか持ってないし、あえて入れるつもりもない。なんかさー、以前は Chrome にドロップしたら再生出来てた気がすんだけど、今は反応しなくなってて。気のせいかなぁ?

てなわけで、まずは「online swf player」でググってみたんだけれど、なさそうなのね。だったら作っちゃおうか、と思った。思った…けど失敗した。「ローカルで、なおかつ「同じフォルダ内にある」」場合にだけ使えるものが「出来た! やった!」:

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>失敗作、でもまったく使えないというほどでもない</title>
 5 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
 6     integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
 7 <style>
 8 #dragarea {
 9     padding: 110px 150px;
10     border: 2px dashed #666;
11     border-radius: 6px;
12     background-color: #ccc;
13     text-align: center;
14 }
15 </style>
16 <script>
17 $(document).ready(function() {
18     var $da = $("#dragarea");
19     $da.on("dragenter", function(e) {
20         e.stopPropagation();
21         e.preventDefault();
22     });
23     $da.on("dragover", function(e) {
24         e.stopPropagation();
25         e.preventDefault();
26     });
27     $da.on("drop", function(_e) {
28         var e = _e;
29         if (_e.originalEvent) {
30             e = _e.originalEvent;
31         }
32         e.stopPropagation();
33         e.preventDefault();
34         var f = e.dataTransfer.files[0];
35         $('#player').html(
36             '<object type="application/x-shockwave-flash"' +
37             '  data="' + f.name + '" width="100%" height="100%" ' +
38             '  id="vvq-702-flash-1" style="visibility: visible;">' +
39             '  <param name="wmode" value="opaque">' +
40             '  <param name="allowfullscreen" value="true">' +
41             '  <param name="allowscriptaccess" value="always">' +
42             '</object>'
43             )
44     });
45 });
46 </script>
47 </head>
48 <body>
49 <div id="dragarea">Drag your swf file here.</div>
50 <div id="player"/>
51 </body>
52 </html>

何がどういうふうになって「こうなっちゃったのか」は、要はドロップされたアイテムからフルパスを取得する術が見つからず…。色々こねくりまわしたさ。けど「fullpath」プロパティは html がある場所を補ってくれるだけのインチキ、でしか取れなかった。

何言ってるか伝わりにくいね、「取れたぞーフルパス」はこうだった:

  1. c:/aaa/zzz.html として
  2. c:/bbb/ccc/ddd/eee.swf をドロップすると…
  3. なぜだか file:///c:/aaa/eee.swf だと主張してくれる、ラッキー

つまり逆に言えばこういう構造なら使える、ってこと:

1 c:/aaa/zzz.html
2 c:/aaa/eee.swf
3 c:/aaa/eee2.swf
4 c:/aaa/eee3.swf
5 c:/aaa/eee4.swf

ので一箇所に swf をかき集めてからこの html をその場所に置いて…とすりゃ用は足せるつーこと。

あんましこれ以上頑張る気にもなれず。今後アタシが日常的にこれを使うとも思えないんで。けど「今日の用途」にはまぁ使えないもんでもなかったんで。一年後に必要になったらまたここからコピペして同じことすりゃいいっしょ。