こんにちは、jquery を使用している html5 ビデオ プレーヤーで問題が発生した場合、src を変更したいと考えています。
以下はsrcを変更しますが：
$(document).ready(function () {
$('.featureLogoText').click(function (e) {
var media = $(this).attr('media');
var mediamp4 = media + "mp4";
var mediawebm = media + "webm";
var mediaogv = media + "ogv";
var newPoster = $(this).attr('data-poster');
$('.scrPoster').attr('poster', newPoster);
$('.scrVideomp4').attr('src', mediamp4);
$('.scrVideowebm').attr('src', mediawebm);
$('.scrVideogg').attr('src', mediaogv);
$("#scrVideomp4").load();
$("#scrVideowebm").load();
$("#scrVideogg").load();
$('.firstFrameFlash').attr('src', newPoster);
// $('embed').attr('flashparam', 'config={"playitem":[{"url":"http://localhost/test.flv","autoPlay":false}]}');
$(".scrPoster > object > embed").attr("src", media + ".mp4");
});
});
HTML:
<div class="divVideoWrapper">
<div class="divVideo">
<div class="divVideoContainer">
<div class="video_player">
<video class="scrPoster" controls="controls" poster="http://static.e-talemedia.net/content/images/frame3.png">
<source id="scrVideomp4" class="scrVideomp4" src="http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.mp4"
type="video/mp4" />
<source id="scrVideowebm" class="scrVideowebm" src="http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.webm"
type="video/webm" />
<source id="scrVideogg" class="scrVideogg" src="http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.ogv"
type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
width="352" height="198">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param class="flashparam" name="flashVars" value="config={'playlist':['http://static.e-talemedia.net/content/images/frame3.png',{'url':'http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.mp4','autoPlay':false}]}" />
<img class="firstFrameFlash" alt="Bosch Features" src="http://static.e-talemedia.net/content/images/frame3.png"
width="352" height="198" title="No video playback capabilities, please download the video below" />
</object>
</video>
<div class="custom_controls">
<div class="divBigButton">
<a class="playBig" title="playBig"></a>
</div>
<a class="play" title="Play"></a><a class="pause" title="Pause"></a>
<div class="volumeWrapper">
<div class="volume">
<div class="volume_slider">
</div>
<a class="mute" title="Mute"></a><a class="unmute" title="Unmute"></a>
</div>
</div>
<div class="timer">
00:00</div>
<div class="time_slider">
</div>
</div>
</div>
<script>
$(function () {
$('.video_player').myPlayer();
});
</script>
</div>
ビデオプレーヤーで再生をクリックすると、新しいビデオではなく古いビデオが再生されます。
と思いました
$("#scrVideomp4").load();
これを修正しますが、そうではないようです。
クリックすると、再生中のビデオを停止し、新しいビデオに変更します。
何か不足していますか？
編集
私はhtml5ビデオとフラッシュを使用しているので、次のようにvideocontainer divのhtmlを削除してから、新しいhtmlに置き換えてみました:
$(document).ready(function () {
$('.featureLogoText').click(function (e) {
var media = $(this).attr('media');
var mediamp4 = media + "mp4";
var mediawebm = media + "webm";
var mediaogv = media + "ogv";
var newPoster = $(this).attr('data-poster');
var html = ' <video class=\"scrPoster\" controls=\"controls\" poster=\"' + newPoster + '\"><source id=\"scrVideomp4\" class=\"scrVideomp4\" src=\"' + mediamp4 + '\" type=\"video/mp4\" /><source id=\"scrVideowebm\" class=\"scrVideowebm\" src=\"' + mediawebm + '\" type=\"video/webm\" /><source id=\"scrVideogg\" class=\"scrVideogg\" src=\"' + mediaogv + '\" type=\"video/ogg\" /><object width=\"352\" height=\"198\"><param name=\"movie\" value=\"http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf\" type=\"application/x-shockwave-flash\"allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"352\" height=\"198\" flashvars=\"src=' + mediamp4 + '&poster=' + newPoster + '\"></embed></object></video><div class=\"custom_controls\"><div class=\"divBigButton\"><a class=\"playBig\" title=\"playBig\"></a></div><a class=\"play\" title=\"Play\"></a><a class=\"pause\" title=\"Pause\"></a><div class=\"volumeWrapper\"><div class=\"volume\"><div class=\"volume_slider\"></div><a class=\"mute\" title=\"Mute\"></a><a class=\"unmute\" title=\"Unmute\"></a></div></div><div class=\"timer\">00:00</div><div class=\"time_slider\"></div></div>';
alert(html);
$("#videoPlayerChange").html("");
$("#videoPlayerChange").append(html);
});
});
これは、新しいビデオが再生されるという意味で機能しますが、クリック後に以前のようにhtml5プレーヤーにデフォルト設定するのではなく、何らかの理由でchrome、firefox、およびie9でフラッシュプレーヤーになります-なぜこれなのか、方法はありますか丸めますか？すでに構築されているDOMと何か関係があるのでしょうか、それともそれらの線に沿った何かでしょうか?
ありがとう