• 締切済み

html5 <video>について

埋め込み動画で、再生ボタンを押したら自動で全画面になって再生させるにはどうすれば良いでしょうか? <video> <source src="test.mp4"> </video>

  • dyo
  • お礼率1% (12/711)
  • HTML
  • 回答数1
  • ありがとう数0

みんなの回答

  • agehage
  • ベストアンサー率22% (2555/11363)
回答No.1

全画面についてはこちらのサイトをご覧ください https://alaki.co.jp/blog/?p=2096 ただ、ブラウザによっては自動再生はできないと思います chromeだと半年くらい前にできないように変わりました

dyo
質問者

補足

回答ありがとうございます。 自動再生ではなく、一度ページを表示させて動画の再生ボタンを押したら全画面で再生されるような感じにしたいです。

関連するQ&A

  • IE9でvideoタグによる動画が再生できません

    こんにちは。 4/26より正式版のダウンロードが始まったIE9をさっそく入れました。 (Windows7 HP 64bit版) それで自分のホームページでかねてより作ってあった、videoタグを使ったH.264動画の再生を試しました。 しかし、IE9はHTML5の対応が始まり、videoタグとH.264コーデックをサポートすると聞いていたのですが、なぜか再生されません。画面にビデオが出てきません。 IE9は32bit版、64bit版の両方で試しましたが、両方ともダメでした。 http://www.htmq.com/html5/004.shtml を参考に、タグはこうしています・・ ----- <video controls width="800" height="600"><source src="XXX.mp4">動画を再生するにはvideoタグをサポートしたブラウザが必要です</video> ----- 状況→IE9では「動画を再生するにはvideoタグをサポートしたブラウザが必要です」が表示されます・・ 一方、Chromeなら全く問題なくウェブ画面上で再生できるので、タグやファイル自体に問題があるとは考えにくいです。 もちろんXXX.mp4はパソコンのローカルでも再生可能です(WMPで)。 また、もう一台別のパソコンでも試しましたが、同様の状況ですので、特定のパソコンの問題とも思えません。 さらに、ソースをsource→ <video src="XXX.mp4"></video> にしてみましたが、やはりダメでした。 ちなみにこの動画は、iPhone4で撮影した動画です。 iPhone4のカメラの動画はH.264ですよね? ただし、ファイルをiPhoneからパソコンに移し、拡張子(.mov)は手動で.mp4に換え、サーバにアップしました(パソコンのローカルではそれで再生できました)。 なぜ再生できないのか、原因が何なのか、どうすればよいかご教授下さい。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 非公開ディレクトリの動画再生

    flowplayerを利用し、非公開ディレクトリの動画を再生したいです。 パスは以下のようになっています。 /var/www/html/test.html(動画ファイル再生) /var/www/html/flowplayer/(flowplayer.js等のファイル) /var/www/sample.mp4(動画ファイル) /var/www/html/test.php /var/www/html/test.htmlの動画再生部分は以下のように記載しています。 <div class="flowplayer" data-swf="/flowplayer/flowplayer.swf" data-ratio="0.417"> <video> <source type="video/mp4" src="****"/> </video> </div> srcの部分が公開ディレクトリではないので、どのように書いたらいいのか わかりません。 src="/test.php"と記載し、以下のようなphpを書きましたが 動画が表示されず、困っています。 <?php header('Content-type: MIME-Type'); header('Content-type: video/mp4'); readfile('/var/www/sample.mp4'); ?> ヘッダの書き方が違うのでしょうか? そもそも、このような方法が正しいのかもわかりませんので 教えて頂けると嬉しいです。 公開ディレクトリ上にsample.mp4を置き、src="/sample.mp4"と記載したところ、 動画は再生されました。

    • ベストアンサー
    • PHP
  • videoタグについて スマホで動画が再生されない

    動画の埋め込みについて教えてください。 新しく動画をつくったので差し替えたのですがスマホで再生されないので教えてください。 <埋め込みタグ> <video src="●●●.mp4" playsinline loop autoplay muted></video> ループ再生させたい 古い◆◆◆.mp4 はスマホで再生されていました。 ファイル名だけ新しい●●●に変更しました。 playsinline loop autoplay muted は◆◆◆.mp4も●●●.mp4も同じ設定です。 PCではちゃんと再生せれるので、ファイル名間違いではないと思います。edge,Google Chrome,Firefoxで再生を確認しました。 <ファイルサイズ> ◆◆◆.mp4 8.61MB 総ビットレート542kbps ●●●.mp4 2.27MB 総ビットレート2111kbps スマホだと画面が真っ白になります。 何が原因でしょうか。ご教授願います。

    • ベストアンサー
    • HTML
  • windows firefox mp4 見れない

    web製作をしています。 埋め込みでmp4動画を入れたいのですが、 windows firefox のみ 手を尽くしても 表示されず 見れません。 ↓試した事です。 ■ videoタグ <video src="files/test.mp4"></video> ■ videoタグ MINE type指定 <video><source src="files/test.mp4" type="video/mp4"></video> ■ embed での指定 <embed src="files/test.mp4" type="video/mpeg"> ■ 下記サイト [html5media]プラグイン http://html5media.info/ ■ 下記サイト [jw player]プラグイン http://www.longtailvideo.com/jw-player/learn-more/ 上記すべて動きませんでした。 エラーの内容は 「この動画のファイル形式またはMIMEタイプはサポートされていません」 です。。。 すみません。。。ご教授をお願い致します。

  • <object> と<video>タグの使い方

    新年明けましておめでとうございます。 新年早々に、皆様お正月休みのところを不躾ながら、早速に質問をさせて頂きたいと思います。お時間のある方は是非ご回答いただきたく、よろしくお願いいたします。 質問タイトルのごとく、<OBJECT> TAG ,<VIDEO> TAG を使ってhtml 文書を作成しましたが、写真も動画も全く表示されません。 環境はwINDOWS10、使用したブラウザーはEdge, FireFox, Chrome, Internet Explorerの4つです。いずれのブラウザーでも表示されませんでした。 自分のHTML文書を張り付けておきます。 どこが間違っているのかをご指摘いただくと有難いです。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> video-test</title> </head> <body bgcolor="pink"> <h1> object and video test</h1> <object data="C:/Users/Shiro/Desktop/P2220270.JPG" width='640px' height='480px' type='image/jpg'></object> <video width='900px' height='700px' controls> <source src="C:/HitPaw Video Converter/Converted/04 三年目の浮気.mp4" type='video/mp4' > </source> </video> </body> </html> ちなみに、ビデオの方は元々 .avi フォーマットであったものを、HitPaw Video Converter というソフトを使って変換したもんですが、お試しバージョンのため、動画の1/3しかないものです。Windows Media Player ではちゃんと再生できます。 どうかこのあたりに詳しい方がいらっしゃいましたら、どうぞお考えをお聞かせください。

    • ベストアンサー
    • HTML
  • こんな操作ができるVHSビデオデッキ探してます

    再生中の早送り・巻き戻し操作についてなのですが、最近は、早送り・巻き戻しボタンを押したらボタンを離しても再生もしくは停止ボタンを押すまで自動的に早送り・巻き戻しし続けるビデオが多いようです。 私が探しているのは、早送り・巻き戻しボタンを押してる時だけ早送り・巻き戻しをして、ボタンを離したらすぐに普通の再生画面に戻る、という操作ができるVHSビデオデッキです。これだと微妙な早送り・巻き戻し操作が可能なので。よろしくお願いします。

  • iframeで動画を埋め込み再生、リンクの貼り付け

    iframeで動画を貼り付けて自動再生させながら、動画のどこかをクリックすると別のページに飛ばす事は可能でしょうか? <iframe src="image/001.mp4" name="video" width="775" height="354" frameborder="0" ></iframe> この動画にリンクを埋め込むプログラムとかはありますか? よろしくお願い致します。

    • ベストアンサー
    • HTML
  • iphoneでmp4動画が再生されません。。。

    下記videoタグを使用して、コードを記述しておりますが再生されません。 ファイルサイズも1.5MBなので、動画にしてはそこまで大きくないと思います。 サーバー側に問題があるのか、記述に問題があるのでしょうか? <video playsinline autoplay muted loop> <source src=”movie.mp4″> </video>

  • IE9で動画部分が真っ白になる。

    IE9で動画が見れず、困っています。 OS:Windows7 HP 現在HTML5でHPを作成し、ページ内に動画をvideoタグで埋め込みましたが動画部分のみ真っ白になってしまいます。(画像添付しております。) 色々調べて試してみたのですが、どれも上手くいきませんでした。 ・IEのキャッシュ全消去 ・.htaccessに動画読み込み設定追記 ・videoタグの直前に<!DOCTYPE html>を追記 ・typeタグを削除 ・プレイヤー最新に更新 動画は各ブラウザに対応するために以下の様に記述しています。 ------略------------ <source src="test.mp4" /><!--IE・Safari向け--> <source src="test.ogv" /><!--Firefox・Opera向け--> <source src="test.webm" /><!--Google Chrome・Opera向け--> ------------------------ Chromeとfirefoxでは見ることが出来ますが、IEだとローカル環境でも動かず真っ白で自力では解決することが出来ないと思い、質問させていただきました。 拙い文章で申し訳ございませんが、お力添えいただければ幸いです。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • iPad ビデオでしか動画が再生出来ない

    iPad ビデオでしか動画が再生出来ない realplayerのコンバーターでiPad対応形式(.m4v形式)に変換し、iTune経由でiPad標準のビデオでは再生出来るのですが他のアプリでは再生出来ません。再生画面は開きますが、再生ボタンを押しても一瞬動画が出るものの即停止状態になってしまいます。試しに違うアプリにも入れて見ましたが同様の症状です。 違う動画でもいくつか試しましたが同様です。