webmアドレスを取得したい

動画を指定すると読み込み再生するところまで行きました。
動画をキャンバスに読み込んで再生させたいのですが、webmはアドレスの末尾が異なるようです。
取得するにはどうすればいいのでしょうか？
末尾を文字列操作するしかないのでしょうか？

<html lang="ja"><head> <meta charset="utf-8"> <title>File</title> </head> <body> <div><input id="file" name="file" type="file" /> <ul> <li>名前：<span id="name"></span></li> <li>種類：<span id="type"></span></li> <li>サイズ：<span id="size"></span></li> <li>URL：<span id="url"></span></li> <li><img contenteditable="true" id="file-preview" ></li> </ul> <video id="dougad" src="video.mp4" controls></video> <p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p> </video> </div> <script> document.getElementById('file').addEventListener('change', function (e) { // 1枚だけ表示する var file = e.target.files[0]; // ファイルのブラウザ上でのURLを取得する var blobUrl = window.URL.createObjectURL(file); var names= document.getElementById('name'); names.innerHTML = file.name; var names= document.getElementById('type'); type.innerHTML = file.type; var size= document.getElementById('size'); size.innerHTML = file.size; var url= document.getElementById('url'); url.innerHTML = file.url; var douga = document.getElementById('dougad'); douga.src = blobUrl; // img要素に表示 var img = document.getElementById('file-preview'); img.src = blobUrl; }); </script> </body></html>

行動規範の内容に同意します

回答1件

自己解決

まだよくわからないままですが、以下のサンプルの <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4">を消しても動画再生できているので、きっとキャンバスが取れているのだと思います。ありがとうございました。

投稿2019/11/24 15:46

kidaer

総合スコア31