在图像中播放视频

Question

我的问题与此有关this question

<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;
}

我也在做同样的事情。它无法正常工作，即使我删除了图像，视频也无法正常工作。

This is my page.

Answer 1

改变#tv_container:after { z-index: -10 }

也改了 <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>

在图像中播放视频

Playing a video inside an image

css

html5-video