將視頻加載到同一個HTML頁面

我想在同一個HTML頁面中加載視頻。該視頻已經在工作並鏈接到一個按鈕，但該視頻正在打開一個新頁面。我想念一些代碼嗎？將視頻加載到同一個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>

來源

2011-12-21 kim

這不像插入鏈接那麼簡單。使用球員，例如http://jplayer.org – 2011-12-21 09:30:23

以前從未嘗試過玩家，但我現在就試試這個......感謝您的評論！ – kim 2011-12-21 09:45:41

請試試這個：

<a href="onderdelen/movies/santa.mov" target="_self"><img src="knoppen/van_ons.png" /></a>

來源

2011-12-21 09:37:42 Bidesi

我認爲這是一個解決方案，但是當我添加此代碼時，我的按鈕（img）消失... – kim 2011-12-21 09:44:03

您可以嵌入使用object tag或HTML5 video tag視頻，雖然你可能遇到編解碼器或瀏覽器不兼容問題的問題。因此，我建議下列之一：

對於一個簡單的解決方案，它的工作原理無處不在，上傳YouTube和副本視頻託管平臺上的視頻/粘貼在你的網頁得到那裏的HTML。
使用流媒體播放器或jplayer等視頻播放器庫，實施起來有點困難，但是您不會擁有Youtube品牌，而且您的視頻保持私密。

來源

2011-12-21 09:43:05 Parzifal

謝謝！首先，我會嘗試一個球員，但我不知道如何將其鏈接到我的按鈕。我將在上面添加我的新代碼，以便您可以查看它。 – kim 2011-12-21 10:11:02

你必須使用像流式播放器這樣的播放器將視頻嵌入到你的頁面上。 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>

來源

2011-12-21 09:43:56 jackson5

我想使用這個HTML5代碼，但不想使用.fla。如何將視頻添加到按鈕，以便視頻將它自己加載到同一網頁中？ – kim 2011-12-21 10:43:21

我不清楚，你想點擊一個按鈕，在該頁面上加載視頻？ – jackson5 2011-12-22 00:05:06

如果是這樣的話，那麼我建議你使用jplayer或者flowplayer ..因爲目前沒有瀏覽器支持flv的

將視頻加載到同一個HTML頁面

回答

相關問題