質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

Webサイトで動画のサムネイルを表示させたい(htmlのvideoタグ)

rms398
rms398

総合スコア50

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

10113閲覧

投稿2017/05/23 07:46

編集2017/05/23 12:52

###前提・実現したいこと
html javascript phpで動画をアップロードする機能を作っています。
動画をファイル選択またはドラッグアンドドロップすると動画のサムネイルが表示されるということをしたいのですが、表示されません
<video src="..." poster></video>のようにposterで動画の1フレーム目をサムネイル画像として表示させようとしてもサムネイルが表示されずじまいです。
videoタグが書かれているところはjavascriptの後半の$('#fileView').append...の行です
※cssによって表示されていない恐れがあるのでついでにcssもソースを出しときます

動画のサムネイルが表示されず

###該当のソースコード

javascript

$(function(){ //フォームデータを一時保存する配列 var formDataArray = []; //画像の数を数える var cnt = 0; //inputによってファイルが読み込まれた時に呼ばれる $('#file').on('change', function () { //入力されたファイル取得 var files = this.files; //読み込み処理 readFiles(files); }); //ドロップされた時に呼ばれる $('#dropAria').on('drop', function (event) { //デフォルトの動きを無効化 event.preventDefault(); //ドラッグ&ドロップされたファイル取得 var files = event.originalEvent.dataTransfer.files; //読み込み処理 readFiles(files); }) //ドロップ領域にはいった時に呼ばれる .on('dragenter', function (event) { //デフォルトの動きを無効化 event.preventDefault(); }) //ドロップ領域上にある間呼ばれる .on('dragover', function (event) { //デフォルトの動きを無効化 event.preventDefault(); }); //クリックした時にデータ送信 $('#upload').on('click',function(){ formDataArray.forEach(function(formData){ console.log(formData.get("file")); if(formData.get("file")){ uploadFiles(formData); formData.delete("file"); formData.delete("tag"); } }); //画像を隠す $('#fileView').hide(); //選択ボタンを表示 $('#file').show(); }); var readFiles = function(files){ //フォームデータを一時保存する配列 formDataArray = []; //選択ボタンを隠す $('#file').hide(); //表示されているサムネイルを削除 $('.view-contaier').remove(); //サムネイルを表示 $('#fileView').show(); //filesはObjectなので配列に変換 //配列に対する処理が実行できるようにするため var filesArray = Array.prototype.slice.call(files, 0, files.length); //送るファイル全てに対してのループ処理 filesArray.forEach(function(file) { var formData = new FormData(); //フォームデータにkey:fileでファイルの関連付け formData.append('file',file); if(document.forms.form1.tagselect.value != '0'){ //フォームデータにkey:tagでファイルの関連付け formData.append('tag',document.forms.form1.tagselect.value); console.log(formData.get('tag')); }else{ formData.append('tag',null); } //フォームデータをフォームデータ一時保存配列に保持 formDataArray.push(formData); //FileReaderのインスタンス作成 var reader = new FileReader(); //読み込み処理を行った際、一度だけ実行 $(reader).one('load',function(event){ //MIMEタイプの最初から5文字取得 imageとvideoとその他を分けるため var type = file.type.slice(0,5); if(!(type == 'video')){ window.alert('動画以外の形式です、動画をアップロードしましょう。'); formData.delete('file'); if(cnt == 0){ //画像を隠す $('#fileView').hide(); window.alert('動画は何もありませんでした'); //選択ボタンを表示 $('#file').show(); } }else{ cnt++; console.log('通りましたよ'); //fileViewに動画追加 //サムネイル風になる $('#fileView').append('<div class="view-contaier"> <div> <video src="' + event.target.result + '" poster></video></div> <span> 動画 </span> </div>'); } }); //DataURLでファイルを読み込む reader.readAsDataURL(file); //アップロード処理 //uploadFiles(formData); }, this); } var uploadFiles = function(formData){ //ajaxで送信 $.ajax({ //POSTで送信 type: 'POST', //ajaxが適切なcontentTypeに自動変換するのを防ぐ contentType: false, //データを文字列に自動変換するのを防ぐ processData: false, //送信先 url: './upload.php', //送るデータ data: formData, //通信成功時に呼ばれる //data 接続先PHPファイルが出力したデータ success: function(data,dataType) { console.log("成功" +data); }, //通信失敗時に呼ばれる //XMLHttpRequest.status HTTPステータス //textStatus timeout、error、parsererror等の文字列 //errorThrown 例外情報 error: function(XMLHttpRequest, textStatus, errorThrown){ console.log(XMLHttpRequest + " : " + textStatus + " : " + errorThrown); } }); } });

php

<?php require_once(dirname(__FILE__)."/DBManager.php"); $nursery_school_id = 1; $DBManager = new DBManager(); $Data = $DBManager->tag_select($nursery_school_id); ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="./css/Upload.css"> <title>動画をアップロードする</title> <script type="text/javascript" src="./js/movieUpload.js"></script> </head> <body background="back.jpg"> <div id="wrapper"> <!--動画をアップロードするフォームを作る--> <form action="" id="form1" method="post" enctype="multipart/form-data"> <div class="center"> <p><font size="10">ど~があっぷろ~ど</font></p> <img alt="" src="UploadMovieImg.jpeg"><br> <font class="tag">たぐ:</font> <select class="tagselect" id="tagselect" name="tagselect"> <option value=0 selected>みにゅうりょく</option> <?php echo count($Data); echo $Data[0]->tag_id . ' ' . $Data[0]->tag_name . ' ' . $Data[1]->tag_id; for($i = 0; $i < count($Data); $i++){ echo '<option value="' . $Data[$i]->tag_id . '">' . $Data[$i]->tag_name . '</option>'; } ?> </select> <input id="upload" type="button" value="あっぷろ~ど"><br> </div> <div class="center2"> <div id="dropAria" draggable="false"> <input type="file" id="file" name="files[]" multiple> <div id="fileView"> </div> </div> </div> </form> <video src="./video/201705221738551552.avi" poster></video> </div> </body> </html>

css

#dropAria{ width:817px; height:234px; border:1px dashed black; margin: 25px auto; } #fileView{ width: 100%; height: 100%; display: flex; flex-wrap: wrap; overflow: auto; } .view-contaier{ width:120px; height:120px; border: 1px solid #555555; overflow: auto; } .view-contaier div{ width: 100px; margin: 0 auto; } .view-contaier span{ font-size:25px; } .view-contaier div img{ width:100px; height:auto; margin-top:20px; } .view-contaier div video{ width:100px; height:auto; } .view-contaier div span{ width:100px; height:auto; } @font-face{ font-family: 'azuki'; src: url(./fonts/azuki.ttf); }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。