Загрузить видео на той же HTML-странице - PullRequest
Новая
       21

Загрузить видео на той же HTML-странице

0 голосов
/ 21 декабря 2011

Я хочу загрузить видео на той же HTML-странице. Видео уже работает и связано с кнопкой, но само видео открывается на новой странице. Я пропускаю какой-нибудь код?

Код: 

<div id="van_ons"><li><a href="onderdelen/movies/santa.mov"><img src="knoppen/van_ons.png" /><img src="knoppen/van-ons.png" /></a></li></div>

Код игрока и кнопок: 

<div id="container">
 <div id="buttons">

    <ul>

        <div id="van_ons"><li><a href="onderdelen/movies/santa.mov" target="_self"><img src="knoppen/van-ons.png" /></a></li></div>

        <div id="krijg_je"><li><a href="onderdelen/movies/santa.mov"><img src="knoppen/krijgje.png" /></a></li></div>

        <div id="iig"><li><a href="onderdelen/movies/santa.mov"><img src="knoppen/iniedergeval.png" /></a></li></div>

        <div id="een_witte_kerst"><li><a href="onderdelen/movies/santa.mov"><img src="knoppen/eenwittekerst.png" /></a></li></div>



    </ul>

</div>





<div id="achtergrond">
        <!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video class="video-js" width="500" height="400" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">

      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://video-js.zencoder.com/oceans-clip.png" width="400" height="500" alt="Poster Image"
          title="No video playback capabilities." />
      </object>

</div>
</div>

Ответы [ 3 ]

1 голос
/ 21 декабря 2011

Пожалуйста, попробуйте это: 

<a href="onderdelen/movies/santa.mov" target="_self"><img src="knoppen/van_ons.png" /></a>
0 голосов
/ 21 декабря 2011

Вам нужно будет использовать плеер, такой как flowplayer, чтобы встроить видео на свою страницу. http://flowplayer.org/ или вы можете использовать HTML5-видео, но вам понадобится MP4 (H.264) или OGG-видео. 

<video width="320" height="240" controls="controls">
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.ogg" type="video/ogg" />
   Your browser does not support the video tag.
 </video>
0 голосов
/ 21 декабря 2011

Вы можете встраивать видео, используя тег объекта или тег видео HTML5 , хотя вы можете столкнуться с проблемами несовместимости кодека или браузера. Поэтому я предлагаю одно из следующего:

  • Для простого решения, которое работает везде, загрузите видео на платформу видеохостинга, такую ​​как Youtube и скопируйте / вставьте полученный HTML там на вашей веб-странице.
  • Используйте библиотеку видеоплеера, такую ​​как flowplayer или jplayer, это немного сложнее реализовать, но у вас не будет фирменного стиля Youtube, а ваше видео будет приватным.
...