Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[私的]videoタグ使い方

More than 1 year has passed since last update.

基本

<video width="960" height="640" src="https://www.video.jp/movie.mp4" poster="https://www.video.jp/movie.jpg" autoplay loop playsinline muted controls>
    <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>
属性       PC         
width 幅         
height 高さ       
poster       サムネイル    
autoplay 自動再生     
loop ループ再生    
playsinline インライン再生(スマホ用)
muted 音無し     
controls コントロールを表示 

基本上記指定すればよし。
レスポンシブにするには下記スタイルで。

video {
  max-width: 100%;
  width: 100%;
  height: auto;
}

スマホ端末での自動再生

動画を実装するにあたって、クライアントから自動再生にしてほしいという要望がある。
結論言うと自動再生できる端末、できない端末がある。

iOS系は多分ほぼ自動再生できる。

アンドロイド系はGoolgeの動画自動再生させない宣言があるためかできない。
controlsでユーザーが再生しないと見れないず、そのためposterを指定してサムネイルを設定しないと再生ボタンがぽつっと浮いてる感じになる。

一度アンドロイドの動画事情を調べたときに下記の記事が参考になった。
無効ってことは有効にもできるかもだけど、社内の端末ではなんか制限かかってた。

Google Chromeで動画の自動再生を無効にする方法
https://www.amw.jp/2018/02/16/201802167/

楽天goldで動画を再生させたい。

楽天goldサーバーにmp4をおいて、pcから見る分には再生できる。
が、スマホ実機からみると何も操作ができない。
posterが設定してある場合はサムネイルだけ表示、
controlsが設定してある場合はサムネイルがはじかれ▶に/が入ったマークがでて操作できないようになる。(見る端末によって表現が違うのかな)

楽天側の仕様で普通にvideoで読み込みだけじゃ再生できないので、プラグインやらスクリプトで頑張ればいけるかもしれない・・・。
か、他のサーバに動画ファイルを置いて外部読み込みすれば再生はできるようです。
しかし楽天テンプレページは外部リンク駄目なのでgold限定です。

hitomi5
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away