html覆盖video,覆盖HTML5视频上的元素(Overlaying elements over HTML5 video)
覆盖HTML5视频上的元素(Overlaying elements over HTML5 video)
我对CSS和HTML5比较陌生，想看看如何在视频上叠加HTML文本或其他元素。 我继承并修改了某人的代码，当我在JSFiddle上玩它时它似乎正常工作 - https://jsfiddle.net/jxavLps5/但是当我通过我的本地瓶子(WSGI)托管时我无法正常工作服务器 。 我有以下HTML：
ExampleBug Buck Bunny - Trailer
Upgrade browser
Upgrade browser
我的CSS在这里：
html, body{
font-family: 'Open Sans', sans-serif !important;
margin: 0;
}
.container-module {
border-right: none;
border-left: none;
position: relative;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .title-container {
z-index: 2147483647;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #ff0;
}
.video-container video {
position: absolute;
z-index: 100;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
无论我做什么， 我都无法将文字显示在视频上 。 请注意，我必须将位置更改为相对而不是绝对的小提琴才能使其工作。 我究竟做错了什么？ 任何建议表示赞赏。
I am relatively new to CSS and HTML5 and wanted to see how to overlay HTML text or other elements over a video. I inherited and modified someone's code and it appears to work properly when I play around with it on JSFiddle - https://jsfiddle.net/jxavLps5/ but I can't get it to work right when hosted via my local bottle (WSGI) server. I have the following HTML:
ExampleBug Buck Bunny - Trailer
Upgrade browser
Upgrade browser
My CSS is here:
html, body{
font-family: 'Open Sans', sans-serif !important;
margin: 0;
}
.container-module {
border-right: none;
border-left: none;
position: relative;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .title-container {
z-index: 2147483647;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #ff0;
}
.video-container video {
position: absolute;
z-index: 100;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
No matter what I do, I can't get the text to appear over the video. Please note that I had to change the position to relative instead of absolute in the fiddle to get it to work. What am I doing wrong? Any advise appreciated.
原文：https://stackoverflow.com/questions/34797925
更新时间：2020-02-24 18:40
最满意答案
谢谢你们花时间回应。 经过进一步检查，我发现控制台吐出了以下错误：
资源解释为样式表，但使用MIME类型text / html进行传输
我让我的服务器猜测静态内容的mime类型，因为它在过去已经适当地完成了，但它似乎没有做得对。
为了解决这个问题，我重新编写了我附加的静态传递函数，以防有人稍后遇到同样的情况：
@welcomeApp.route('/static/')
def send_static(filepath):
currentLocation = os.path.dirname(os.path.realpath(__file__))
staticPath = currentLocation + '/static/'
if '.mp4' in filepath:
mime = 'video/mp4'
elif '.webm' in filepath:
mime = 'video/webm'
elif '.css' in filepath:
mime = 'text/css'
else:
mime = None
return static_file(filepath, root=staticPath, mimetype= mime )
Thank you guys for taking the time to respond. Upon further inspection I found that console was spitting the following error:
Resource interpreted as Stylesheet but transferred with MIME type text/html
I had let my server guess mime-type for static contents since it has appropriately done in the past, but it appears it wasn't doing it right.
To fix the problem, I rewrote my static delivery function which I am attaching here in case someone runs into the same later:
@welcomeApp.route('/static/')
def send_static(filepath):
currentLocation = os.path.dirname(os.path.realpath(__file__))
staticPath = currentLocation + '/static/'
if '.mp4' in filepath:
mime = 'video/mp4'
elif '.webm' in filepath:
mime = 'video/webm'
elif '.css' in filepath:
mime = 'text/css'
else:
mime = None
return static_file(filepath, root=staticPath, mimetype= mime )
相关问答
我回答这个话题，以防万一有人阅读并对结果感兴趣。 可以在WebView中查看视频元素(视频html5标签)，但是我必须说我不得不处理好几天。 这些是我到目前为止必须遵循的步骤： - 找到一个正确编码的视频 - 初始化WebView时，设置JavaScript，插件WebViewClient和WebChromeClient。 url = new String("http://broken-links.com/tests/video/");
mWebView = (WebView) findView
...
请参阅我的问题，根据HTML 5在移动游猎。 似乎无法控制它，因为视频渲染通过浏览器委托给硬件，并显示在“上方”，因此控制它的css属性不会影响任何东西。 我的研究在一段时间之前，但不要以为从那以后发生了一些变化。 Please refer to my question according HTML 5 on mobile safari. Seems that it's impossible to control it, as video rendering is delegated to har
...
没有。 截至2011年3月，QT HTML5视频标签支持仍在开发中。我打赌它永远不会，因为诺基亚已经失去了对Symbian的兴趣。 No. QT HTML5 video tag support is still under development as of March 2011. And my bet is that it never will, as that Nokia has lost interest in Symbian.
是的，可以做到。 我可以使用createElement()方法创建我想要的source元素，并使用appendChild()方法将它们附加到video元素。 所以，我将修改我发布的原始小提琴中的JS代码，用JS创建一个video元素，其特点是： 两个来源： OGG文件源 MP4文件源 在原始小提琴中的两个视频上定义的所有功能： 控制 准备好后自动播放 玩结束 最初静音 实际上，一个类似于我的video元素的元素有两个来源，用HTML创建并在问题中定义：
...
我是怎么做的(为了简单起见使用jQuery，虽然不是必需的)： $('audio,video').bind('play', function() {
activated = this;
$('audio,video').each(function() {
if(this != activated) this.pause();
});
});
How I'd do it (using jQuery for simplicity, though not required): $(
...
请注意， 标记对象没有isEnabled属性。 您正在查看MultipleTrackList接口，这不是一回事。 查看： http ： //www.w3schools.com/html5/tag_video.asp和https://developer.mozilla.org/en/HTML/Element/video和https://developer.mozilla.org/en/Using_HTML5_audio_and_video 此外，不使用document.write()进
...
从规格： 4.8.10.16使用媒体元素的作者的最佳做法 在诸如机顶盒或移动电话的小型设备上播放音频和视频资源通常受到设备中有限的硬件资源的限制。 例如，设备可能仅支持三个同步视频。 出于这个原因， 在完成播放时释放媒体元素所持有的资源是一种很好的做法，要么通过非常小心地删除对元素的所有引用并允许它被垃圾收集 ，或者更好，通过删除element的src属性和任何源元素后代，并调用元素的load()方法 。 同样，当播放速率不是1.0时，硬件，软件或格式限制可能导致视频帧丢失，音频不稳定或静音。 来
...
您的文件层次结构以及从CSS和HTML引用文件的方式对我来说很好。 我注意到了一些事情。 首先，在您的source元素中，正确的类型是单个video/mp4 ， video/webm和video/ogv 。 在网站中实现背景视频时，另一种常见的策略是添加一些JavaScript，在不喜欢autoplay属性的浏览器上“踢”它们。 例如(您需要在视频元素中添加id="backgroundVideo"才能生效)：
// Play
...
谢谢你们花时间回应。 经过进一步检查，我发现控制台吐出了以下错误： 资源解释为样式表，但使用MIME类型text / html进行传输 我让我的服务器猜测静态内容的mime类型，因为它在过去已经适当地完成了，但它似乎没有做得对。 为了解决这个问题，我重新编写了我附加的静态传递函数，以防有人稍后遇到同样的情况： @welcomeApp.route('/static/')
def send_static(filepath):
currentLocation
...
http://videojs.com - 只使用CSS轻松设置HTML5视频播放器的样式。 我过去一直在使用它，它很容易上手。 http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/ - Opera的这篇文章详细介绍了整个规范，编码，等等，并有一篇关于通过添加Javascript侦听器来创建自己的控件的非常深入的文章。 不适合新手，但增加了大量的控制和灵活性(搜索“滚动我
...