Html 嵌入标签中的海报图像_Html

Html 嵌入标签中的海报图像

html

Html 嵌入标签中的海报图像,html,Html,我正在使用标记从服务器读取视频流，我需要在播放此视频之前设置海报图像，但我不知道如何在中设置海报图像这是我的代码： <embed type="application/x-vlc-plugin" name="video1" autoplay="no" loop="yes" width="400" height="300" target="http://10.1.0.1:8180/stream?ip=225.1.0.2&port=1234" />

我正在使用

标记从服务器读取视频流，我需要在播放此视频之前设置海报图像，但我不知道如何在

中设置海报图像

这是我的代码：

<embed type="application/x-vlc-plugin"
     name="video1"
     autoplay="no" loop="yes" width="400" height="300"
     target="http://10.1.0.1:8180/stream?ip=225.1.0.2&port=1234" />

嵌入的

元素没有海报属性。视频确实支持，但看起来您正在做视频不支持的事情（假设无论如何）。在这种情况下，您可能需要在顶部使用img
元素，当视频开始播放时，您可以使用JS删除该元素。
我很快就为您准备好了。我们应该完成这项工作
<style>
    embed {
        display:none;
    }
    #myPosterImage {
        width:100%;
        height:100%;
    }
    #vidWrapper {
        width:400px;
        height:300px;
    }
</style>

<div id="vidWrapper">
    <img src="poster.jpg" id="myPosterImage"/>
    <embed type="application/x-vlc-plugin"
         name="video1"
         autoplay="no" loop="yes" width="400" height="300"
         target="http://10.1.0.1:8180/stream?ip=225.1.0.2&port=1234" /> 
</div>


/* import jQuery at top in <head> and at bottom of page have this: */
<script>
    $(function() {
        $('#myPosterImage').on('click', function() {
            $('#myPosterImage').hide();
            $('embed').show();
        });
    });
</script>


嵌入{
显示：无；
}
#myPosterImage{
宽度：100%；
身高：100%；
}
#维德包装机{
宽度：400px；
高度：300px；
}
/*在页面顶部和底部导入jQuery时，请执行以下操作：*/
$（函数（）{
$（'#myPosterImage'）。在（'单击'，函数（）上）{
$（'#myPosterImage'）.hide（）；
$（'embed'）.show（）；
});
});
这并不能完全回答问题，但我推荐它是vlc插件的一个分支，它可以在IE和其他浏览器中工作，因为vlc需要不同的嵌入标记
它还有更多有用的javascript事件