Question

我想使用HTML5和JS为我的网络应用程序创建一个类似视频滑块的YouTube。在下面的代码中，当我点击滑块上的图片时，它会打开youtube页面并播放视频。我希望youtube视频可以在相同的frame / div标签中播放，而不是重定向到youtube 。

我的代码是这样的 -

    <!DOCTYPE html> 
<html> 
<head> 
<link href="js-image-slider.css" rel="stylesheet" type="text/css" /> 
<script src="themes/6/mcVideoPlugin.js" type="text/javascript"></script>
<script src="js-image-slider.js" type="text/javascript">
</script> 
</head> 
<body> 
    <div id="sliderFrame"> 
        <div id="slider">
            <a class="video" href="https://www.youtube.com/watch?v=aZDYsSOngik">
                <img src="image-slider-1.jpg" />
                <img src="video.jpg" />
            </a>
            <a class="video" href="video.mp4">
                <img src="image-slider-2.jpg" alt="Caption for slide 1"/> 
                <img src="video.jpg" />
            </a>            
            <a class="video" href="video.mp4">
                <img src="image-slider-3.jpg" alt="Caption for slide 2"/>
                <img src="video.jpg" />
            </a>
            <a class="video" href="video.mp4">
                <img src="image-slider-4.jpg"/>
                <img src="video.jpg" />
            </a>
            <a class="video" href="video.mp4">
                <img src="image-slider-5.jpg" />
                <img src="video.jpg" />
            </a>
        </div> 
    </div> 
</body> 
</html>

有人可以帮忙吗？

Answer 1

<embed width="420" height="345" src="youtube.com/v/XGSy3_Czz8k"; type="application/x-shockwave-flash"> </embed>

Answer 2

尝试在代码中使用youtube链接的嵌入版本。

<iframe width="560" height="315" src="//www.youtube.com/embed/aZDYsSOngik" frameborder="0" allowfullscreen></iframe>

您可以在上面的代码中调整视频的高度和宽度。还有frameborder和allowfullscreen选项。

您可以在共享＆gt;嵌入选项下找到您的嵌入式视频链接 youtube中的视频。

html5视频标记在同一个div中显示视频

2 个答案: