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

Question

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

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

$(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
  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>

#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);
}

Answer 1

poster 属性は動画を読みこんでいないときに画像データを表示するために使います。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

映像データが利用不可能な場合に表示される画像データを URI 形式で指定します。この属性が指定されない場合、再生可能な映像データがない場合は何も表示されません。

この属性を使わないようにするか、別途画像を用意する必要があります。

Comments

[rms398]

では動画からサムネイルを取得してそのサムネイルをvideoのposterにする処理をすればいいんでしょうかね

[x_x]

いまのブラウザの処理としては読み込めてさえいれば、何もせずともそのままで表示されると思うのですが、ブラウザが未対応の動画形式などになっているのでしょうか？
エラーを確認してみるのもいいかもしれません。
https://developer.mozilla.org/en-US/docs/Web/API/MediaError