HTML/CSS」カテゴリーアーカイブ

HTMLおよびCSSに関するカテゴリーです。

JavaScriptでHTML5の<video>を操作する方法

HTML5で追加された<video>タグを使うと簡単に動画を表示することができます。

<video id="video" src="video.mp4"></video>

標準では再生や一時停止などを行う操作パネルが表示されていませんが、controlsを追加することで、操作パネルを表示することもできます。

<video id="video" src="video.mp4" controls></video>

この<video>をJavaScriptから操作したい場合は次のような感じで実装できます。

<video>を再生する

var element = document.getElementsById('video');
element.play();

<video>の一時停止する

var element = document.getElementsById('video');
element.pause();

他、特定の位置にシークしたり、ボリュームを調整したりといった操作もJavaScriptからできるようになっています。詳細はリンク先などを確認してみてください。

リンク

HTMLMediaElement – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

<video>: The Video Embed element – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Video

改行したくない場合はwhite-space:nowrap

改行したくない場合はCSSにwhite-space: nowrapと記載するとよいそうです。

nowrapなし

style="width: 5em"
あいうえおかきくけこさしすせそ

nowrapあり

style="width: 5em; white-space: nowrap"
あいうえおかきくけこさしすせそ

リンク

white-space – CSS: Cascading Style Sheets | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

日本語文字列を含むURLのRewrite

日本語文字列を含むURLでApacheのRewrite機能を使おうとして、ハマってしまいました。

(自分的に)普通に考えて、

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/aaa/%E6%97%A5%E6%9C%AC%E8%AA%9E$
RewriteRule .* /bbb/%E6%97%A5%E6%9C%AC%E8%AA%9E

という風に、URLエンコードした文字列を使って書いてみたのですが、うまくいきません。

いろいろ調べてみたところ、とりあえず解決方法は直接日本語で書くことみたいです。

RewriteEngine On
RewriteCond %{REQUEST_URI} ^/aaa/日本語$
RewriteRule .* /bbb/日本語

理由はよく分かっていません。ブラウザの設定によっては違う文字コードでエンコードされて変な結果になるような気もします。

が、何故かうまく動きます。

日本語の文字列を使うといろいろとハマる原因になるので、極力使わない方がいいとは思いますが、使いたくなる場面もあって難しいですね。