Javascript html5视频标签,用于在同一分区中显示视频

Javascript html5视频标签,用于在同一分区中显示视频,javascript,jquery,html,video,youtube,Javascript,Jquery,Html,Video,Youtube,我想使用HTML5和JS为我的web应用程序创建一个类似youtube的视频滑块。在下面的代码中,当我单击滑块上的图像时,它会打开youtube页面并播放视频。我希望youtube视频以相同的frame/div标签播放,而不是重定向到youtube 我的代码是这样的- <!DOCTYPE html> <html> <head> <link href="js-image-slider.css" rel="stylesheet" type="t

我想使用HTML5和JS为我的web应用程序创建一个类似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>
有人能帮忙吗?

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

<embed width="420" height="345" src="youtube.com/v/XGSy3_Czz8k"; type="application/x-shockwave-flash"> </embed>
<iframe width="560" height="315" src="//www.youtube.com/embed/aZDYsSOngik" frameborder="0" allowfullscreen></iframe>
您可以在上述代码中调整视频的高度和宽度。 还有frameborder和allowfullscreen选项

您可以在共享>嵌入选项下找到嵌入的视频链接 youtube上的视频

请阅读下面的文章