我正在尝试为我正在开发的网站创建完整的背景视频.
我的视频标签都设置正确,它在Safari和Firefox中播放效果很好,但在Chrome中存在问题.
当我在Chrome中播放时,音频开始播放,但不会显示视频.只有在您调整页面大小或执行其他可视化操作(例如在页面上选择文本)时,才会显示视频.然后页面显示视频.
是否有解决此问题的方法,或某种方式诱骗Chrome正确呈现视频？它似乎不是一个编解码器问题,因为它一旦你调整页面大小就可以正常播放(页面大小无关紧要,你可以将它调整回原来的大小并继续播放).
测试网站:www.mashwork.com/testsite
看代码:
#mashvid {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
min-width: 100%;
z-index: -5;
}
<video preload id="mashvid" poster="images/mashvid_poster.png">
<source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'>
Your browser does not support the video tag.
</video>
这是一个Safari bug还是我做错了什么？
在Safari与Chrome和Firefox中查看此CodePen:https://codepen.io/mattaningram/pen/zWVxzR
或者在下面运行代码段:
.item {
--itemColor: 200, 0, 0;
--itemColorHex: #C80000;
width: 50vw;
height: 50vh;
background-color: rgba( var(--itemColor), 1 );
-webkit-box-shadow: 0 0 15px 10px rgba( var(--itemColor), .5 );
box-shadow: 0 0 15px 10px rgba( var(--itemColor), .5 );
/* box-shadow: 0 0 15px 10px var(--itemColorHex); THIS WORKS */
/* color: rgba( var(--itemColor), .5 ); BOX-SHADOW INHERITS THIS PROPERLY IF UNCOMMENTED */
}
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper"> …我需要的风格,四周嵌在没有字幕后的图像去的元素,但据我可以告诉有没有办法自动添加一个类,或目标<a>s的一个<img>内只有不使用jQuery或一些东西.
这是他们默认出来的方式:
<a href="sample.jpg"><img class="alignnone size-full wp-image-20" src="sample.jpg" alt="Sample Image" width="1280" height="914"></a>
是否有一个简单的wordpress PHP方法,我可以在默认情况下在所有这些元素上设置一个简单的".img"类？
令人困惑的是,这不是Wordpress中的标准功能,很多人抱怨它,但据我所知,没有实际的解决方案.
为了澄清,这应该适用于帖子中的现有图像,而不仅仅是我未来的帖子!