在图像中播放视频 [英] Playing a video inside an image
本文介绍了在图像中播放视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题与此此问题有关
<div id="tv_container">
<video width="300" height="240" controls>
<source src="Spin1038.mov" type="video/mov">
Your browser does not support the video tag.
</video>
</div>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#tv_container video {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
我做同样的事情。它不工作，即使我删除的图像，视频也不工作，即使这样。
I am doing the same thing. The its not working and even if I remove the image, the video isn't working even then as well.
推荐答案
code> #tv_container：after {z-index：-10}
Change #tv_container:after { z-index: -10 }
video width ='245'....>
Also changed the <video width='245'....>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -10; /* This should be lowest z-index value */
}
#tv_container video {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
</style>
</head>
<body>
<div id="tv_container">
<video width="245" height="240" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4"></video>
</div>
</body>
</html>
这篇关于在图像中播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
