私はHTML5ビデオを使って練習するための簡単なページを作成する初心者のjavascriptです。基本的にフルページの動画と、ページの時間を追跡して更新するJavaScriptのタイマーです。 （インスピレーションは、もちろん、Infinite Drunk Ron Swansonによって）。ここにはlive versionのページがあります。注意してください：両方のリンクがサウンドを再生します。JavaScriptのHTML5ビデオsrc文字列を置き換えるとビデオが置き換えられない
私は、スクリプトが7つのビデオのうちの1つを選択して、ページの読み込みを再生したいと考えています。コードでは、1と7の間のランダムな整数を選択し、 "media /"ディレクトリの適切なファイルに文字列を生成し、ビデオ<source>タグのsrc属性を新しい文字列で置き換える必要があります。
これはすべて正しく動作しているようです：コンソールやローカル、github-pagesにアップロードされたエラーはなく、Chrome開発ツールバーの<video>要素を調べるとコードが置き換えられていることがわかりますsrc文字列が正しく表示されます。しかし、このページには異なる動画がロードされていないようです。これは数回前に正しく動作していたため、非常に悪化しています。私は何が変わったのかを見るために歴史に戻ってきましたが、何も見つかりませんでした。
私はPythonから来ていますが、私はまだ取得していないものがあると思っていますが、何が分かるか分かりません！
UPDATE：私はソースタグを挿入するためにcreateElementとappendChildを使用しての代わりquerySelectorAllによって返さNodeListの各要素の属性を変更することで、this questionの助けを借りて、この問題を解決しました。関連する新しいコードは次のとおりです。
function add_source(element, src, type) {
var source = document.createElement("source");
source.src = src;
source.type = type;
element.appendChild(source);
}
function main() {
var video_no = random_int(1,7);
var video_string_mpeg = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".mp4";
var video_string_webm = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".webm";
var videoplayer = document.querySelector(".videoplayer");
add_source(videoplayer, video_string_mpeg, "video/mp4");
add_source(videoplayer, video_string_mpeg, "video/webm");
get_seconds();
}
これは素晴らしいですが、なぜそれが機能するのか完全にはわかりません。説明はまだ歓迎です！ここで
はjavascriptのだ：
start = new Date();
start_time = start.getTime();
function get_seconds() {
var now = new Date();
var time_now = now.getTime();
var time_diff = time_now - start_time;
var seconds = time_diff/1000;
var timer_string = Math.round(seconds);
document.getElementById("timer").innerHTML = timer_string;
window.setTimeout("get_seconds();", 1000);
}
function random_int(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min; }
function main() {
var video_no = random_int(1,7);
var video_string_mpeg = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".mp4";
var video_string_webm = "http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy" + video_no + ".webm";
var sources = document.querySelectorAll(".videoplayer source");
sources.item(0).src = video_string_mpeg;
sources.item(1).src = video_string_webm;
get_seconds();
}
そしてHTML：
<html>
<link rel="stylesheet" href="charleston.css">
<script src="charleston.js" type="text/javascript">
</script>
<body onload="main();">
<video class="videoplayer" loop autoplay>
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy1.mp4" type="video/mp4" />
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/Trudy1.webm" type="video/webm" />
Christ on a cracker, Trudy! Update your web browser!
<audio loop autoplay>
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/charleston.mp3" type="audio/mpeg" />
<source src="http://ecmendenhall.github.com/Infinite-Charleston/media/charleston.ogg" type="audio/ogg" />
</audio>
</video>
<div class="timer_box">
<p>Hell's bells, Trudy! You've been dancing for <a id="timer">0</a> seconds.
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
</div>
</body>
</html>
私はCSSやメディアファイルが問題であるとは思わないが、あなたならば、あなたがproject repositoryでそれらを見ることができますやりたいライブバージョンはhereです。 （注意：それは音を発する）。ご覧のとおり、さまざまな動画を選択することを除いてすべてのことが正しく行われます。