サイト: http://www.ignitionpointventures.com
皆さんこんにちは、
chrome/safari で html5 ビデオの読み込みに問題があります。基本的な考え方は、右側にビデオ サムネイルを含むビデオ コンテナがあるというものです。ビデオコンテナに配置する各ビデオのhtml5ビデオ情報を含む個別のhtmlファイルを作成しました。ページの読み込み時に、jquery ドキュメントを使用して最初のビデオが自動的に読み込まれ、続いて各サムが適切な html5/video を読み込みます。
問題: Chrome と Safari で。
Chrome では、読み込み中のビデオは表示されません。親指をクリックすると、ビデオの最初の画像がメインのビデオ div に表示されますが、読み込みが停止したように見え、再生されません。
Safari では、ビデオがまったく読み込まれません。ファイルを直接再生しようとすると、エラーが発生し、クイックタイム記号に ? が表示されます。マーク。
これはhtml5ビデオの例です
<video width="721px" height"406px" preload="auto" controls="controls">
<embed src="http://www.ignitionpointventures.com/includes/video/v1/v1.mp4" width="721" height="406" allowscriptaccess="always" allowfullscreen="true"></embed>
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.mp4" type="video/mp4" />
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.ogv" type="video/ogg" codecs="theora, vorbis" />
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.webm" type="video/webm" />
<p>Your browser does not support HTML5 video.</p>
</video>
ここにジャバスクリプトがあります
<script type="text/javascript">
$(document).ready(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v1/v1.html');
});
$(function() {
$(".v1").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v1/v1.html');
});
$(".v2").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v2/v2.html');
});
$(".v3").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v3/v3.html');
});
$(".v4").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v4/v4.html');
});
});
</script>
.htaccess ファイルも確認しました
ビデオが少し大きく、問題になる可能性があることは知っていますが、これが本当の問題であるとは思えません。はい、javascriptはより高度な可能性があります。
ありがとう！