はFlashがオフになっていたりするとHTML5のvideo要素でビデオが見れるのですが(ビデオの右下にある「Swith to HTML5 Player」のリンクをクリックしても切り替えられます)、その状態であれば表示しているmp4のファイルを開けばその場で保存ができます。
というわけで、Vimeoで適当なビデオページを開いて下のブックマークレットを実行するだけです。
開いたら、名前を付けて保存で、適当な名前に「.mp4」を付けて保存するだけです。
※IE8以下では使えないです
はFlashがオフになっていたりするとHTML5のvideo要素でビデオが見れるのですが(ビデオの右下にある「Swith to HTML5 Player」のリンクをクリックしても切り替えられます)、その状態であれば表示しているmp4のファイルを開けばその場で保存ができます。
というわけで、Vimeoで適当なビデオページを開いて下のブックマークレットを実行するだけです。
開いたら、名前を付けて保存で、適当な名前に「.mp4」を付けて保存するだけです。
※IE8以下では使えないです
タイトルがカオス・・・下みたいな各vendor prefixを使うか使わんかみたいな連想配列ぽい配列を定義しておくと、trueのvendor prefixが付いたプロパティだけを吐き出すようなやつがほしかった
$use:
-webkit-, true,
-moz-, true,
-o-, true,
-ms-, true;
// 本当はこうしたいけど
$use: {
'-webkit-': true,
'-moz-': true,
'-o-': true,
'-ms-': true
}
全部trueのときは例えばborder-radiusだと
.hoge {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radisu: 5px;
border-radius: 5px;
}
みたいな。falseにしたらそれに対応するprefixが出力されなくなる、みたいな。全部のmixinに書けばそれで終わりだけど、そんなの面倒くさいし、vendor prefixを付けたプロパティを出力するmixinみたいなのを書いた。
githubでちょっと前に公開したやつです。こっちでアナウンスしてなかったので。
ドキュメント・サンプルは以下のリンク先を参考にしてください。(変な英語ですけど、なんとなく言いたいことは分かると思います。
日本語のドキュメントはWebDesigning 4月号のjQuery Labで書きましたので、どうしても日本語ドキュメントじゃないとだめなんだ!っていう方は見てみてください。
特徴は、色んなことできるようにベースになれるようなAPIのみ提供、タイマーでスライドショーみたいにしたい、とかは自分でsetIntervalとか使って実装してください。サンプルの最後にもタイマー使ったものは入っています。
要望とかバグ報告などはgithubのIssuesへお願いします。
元ネタ
これおもしろいなーと思って、でもすごい重くて・・・wよくよく考えたらみんな大好きmarqueeタグとCSS3のlinear-gradient使えばできるよねとか思ってやったらめっちゃ簡単だった。iPhoneとかでも見れるよ。IEはしらん
↓ サンプル
HTMLは超絶シンプル
CSSはほぼlinear-gradient。背景にlinear-gradientで格子状になるよう縦横敷き詰めた擬似要素をmarqueeの上にwidth, height広げて被せる形で
marquee {
position: relative;
color: #ffab00;
background-color: #0a0600;
font-size: 40px;
}
marquee:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(#0a0600 1px, transparent 0px),
linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px),
-webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -moz-linear-gradient(#0a0600 1px, transparent 0px),
-moz-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -o-linear-gradient(#0a0600 1px, transparent 0px),
-o-linear-gradient(0, #0a0600 1px, transparent 1px);
background-image: -ms-linear-gradient(#0a0600 1px, transparent 0px),
-ms-linear-gradient(0, #0a0600 1px, transparent 1px);
background-size: 2px 2px, 2px 2px;
z-index: 10;
}
IEでも見たかったら:afterやめてdivかなんかにして、linear-gradientも背景画像repeatでできるよね。:afterはやめなくてもいいけど
ところでCSS3 marqueeがなんとなくあるけど、OperaとWebkitだけだし、書き方面倒くさそうだからやめた
jsdo.itにforkしたやつ置いたのでよければ Fork me on jsdo.it
forked: HTML5のCanvasとJSで電光掲示板 – jsdo.it – share JavaScript, HTML5 and CSS
追記:なんかやっぱり一部環境で重くなるときがあるらしい