Проблемы при попытке использовать Flowplayer в качестве альтернативы флэш-памяти для видео html5 - PullRequest
Новая
       31

Проблемы при попытке использовать Flowplayer в качестве альтернативы флэш-памяти для видео html5

3 голосов
/ 31 мая 2011

Мне успешно удалось заставить работать html5-видео-теги, и сейчас я пытаюсь реализовать решение для восстановления флэш-памяти с использованием Flowplayer. Ниже мой код: - 

<div id="videocontent">
            <video width="640" height="360" autobuffer controls preload="auto" >
              <source src="fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
              <source src="fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'>
              <source src="fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'>                <object type="application/x-shockwave-flash" data="flowplayer-3.2.7.swf" width="640" height="360">
                <param name="movie" value="flowplayer-3.2.7.swf">
                <param name="allowFullScreen" value="true" />
                <param name="allowscriptaccess" value="always">    
                <param name="flashVars" value="config={'playlist':[{'url':'http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.mp4','autoPlay':false}]}" />
             </object>
          </video>
    </div>

Это ссылка на видео: 

http://www.synergese.co.uk/testMathsOnline/day3/videos/day3FracWelVideo.html

Чтобы проверить это в Firefox, я закомментировал строку, которая ссылалась на файл .ogv (здесь комментарии не отображаются. Когда я включил его здесь на этой странице, текст под комментарием исчез) когда я тестирую его в Firefox, я просто получаю серую коробку. Буду очень признателен, если кто-нибудь сможет помочь.

Большое спасибо, Пиппа

Спасибо, но я все еще застрял. Я скачал VideoJs и реализовал, (я думаю, соответственно). `Ниже мой код: - 

<script src="video.js" type="text/javascript" charset="utf-8"></script>

// Добавить VideoJS ко всем тегам видео на странице, когда DOM готов VideoJS.setupAllWhenReady (); 

            <div id="videocontent">
        <div class="video-js-box">
            <video width="640" height="360" preload="" controls="" poster="day3Wel.jpg" class="video-js" tabindex="0" >
              <source src="fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
              <source src="fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'>
              <source src="fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'>
            <object type="application/x-shockwave-flash" data="flowplayer-3.2.7.swf" width="640" height="360" class="vjs-flash-fallback">
                <param name="movie" value="flowplayer-3.2.7.swf">
                <param name="allowFullScreen" value="true" />
                <param name="allowscriptaccess" value="always">    
                <param value="config={'clip':{'url':'fracWelDay3.mp4','autoPlay':false,'autoBuffering':true, 'scaling':'orig'}}" name="flashvars">
                <!-- Image Fallback -->
                <img width="640" height="360" title="No video playback capabilities." alt="Poster Image" src="day3Wel.jpg">
               </object>
          </video>
        </div> 
        </div>

Кажется, что Flowplayer загружается, но я получаю сообщение об ошибке, в котором говорится, что видеоклип не загружается, и я не знаю, почему. Большое спасибо за вашу помощь

Ответы [ 2 ]

4 голосов
/ 15 сентября 2011

на объекте ... поместите идентификатор ... это одна из вещей, которые я реализовал с помощью flowplyer ... скорее всего, у вас ошибка 2124 ... невозможно загрузить ресурс .. верно ??

.......... ...

, который должен добиться цели ..

1 голос
/ 31 мая 2011

Я обычно использую videoJS для решения подобных задач.Это пример кода: 

<script src="/images/js/zencoder/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/images/js/zencoder/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<script type="text/javascript">
$(document).ready(function(){
        VideoJS.setup();
}
</script>
<div class="video-js-box">
    <video width="480" height="272" preload="" controls="" poster="/images/video/videoBackMiddle.png" class="video-js" tabindex="0">
        <source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' src="/images/video/01.mov"></source>
        <!--Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
          <object width="480" height="272" data="/images/js/flowplayer/flowplayer-3.2.7.swf" type="application/x-shockwave-flash" class="vjs-flash-fallback">
            <param value="/images/js/flowplayer/flowplayer-3.2.7.swf" name="movie">
            <param value="true" name="allowfullscreen">
            <param value="config={'clip':{'url':'/images/video/01.mov','autoPlay':false,'autoBuffering':true, 'scaling':'orig'}}" name="flashvars">
            <!-- Image Fallback -->
            <img width="480" height="272" title="No video playback capabilities." alt="Poster Image" src="/images/video/videoBackMiddle.jpg">
          </object>
        </video>
</div>
...