0

嗨,如果使用 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 视频和 flash 时,我尝试删除 videocontainer div 中的 html,然后将其替换为新的 html,如下所示:

$(文档).ready(函数 () {

        $('.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);

        });
    });

从某种意义上说,新视频现在可以播放,但由于某种原因在 chrome、firefox 和 ie9 中播放,而不是像点击之前那样默认为 html5 播放器,它将是一个 flash 播放器 - 为什么会这样并且有办法圆吗?它是否与已经构建的 DOM 或类似的东西有关?

谢谢

4

1 回答 1

0

好的,我发现了它为什么起作用:所以为了更新 html5 视频,我在源 id 上而不是在视频上执行 .load,所以以下工作:

                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);
                $(".scrPoster").load();

对于 flash,我使用了替换 html:

  var html = ' <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>';

                $("#objFlash").html("");
                $("#objFlash").append(html);

视频播放器的html如下:

<div class="divVideoWrapper">
    <div class="divVideo">
        <div class="divVideoContainer">
            <div id="videoPlayerChange" 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 id="objFlash" 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=http://static.e-talemedia.net/content/video/bosch/testfeaturevideo.mp4&poster=http://static.e-talemedia.net/content/images/frame3.png"></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>
            </div>
            <script>
                $(function () {
                    $('.video_player').myPlayer();
                });
            </script>
        </div>
    </div>
</div>

我已经在 ie8 和 9 Chrome 和 Firefox 中对此进行了测试,现在唯一不能正常工作的想法是即使 ie9 使用 html5 播放器 - 它似乎无法识别海报属性。我希望这对其他人有帮助。

于 2013-05-01T12:26:36.810 回答