视频背景不能在Safari上正常播放
Video Background not playing properly on Safari
视频背景在Safari上不能正常播放。它显示在屏幕的右下方,看起来不太好。
这是链接。
下面是HTML代码:
<video autoplay poster="" id="bgvid" loop>
<!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="http://devjentri.com/wp-content/uploads/2015/09/deW_vid_final_.webm" type="video/webm">
<source src="http://devjentri.com/wp-content/uploads/2015/09/deW-vid-final-.mov" type="video/mp4">
</video>
CSS代码:video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
您需要将供应商前缀版本的转换添加到您的CSS规则中:
-webkit-transform: translateX(-50%) translateY(-50%);
完整的规则应该是这样的:
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
相关文章:
- 如何播放部分音频文件
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 播放当前视频时如何停止其他视频?JavaScript
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 是否可以使用iframe API在iOS浏览器上播放youtube视频
- 如何检查用户在html5视频播放器中观看了完整的视频
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- JS,用于播放提示音以通知未按预期工作
- 只在滚动时播放循环css动画-滚动停止时停止
- 让javascript知道epub3电子书中何时播放媒体覆盖
- 我可以使此幻灯片图像自动播放吗?
- CSS动画暂停并使用javascript播放
- YouTube作为弹出窗口在桌面版本上播放,但不在移动设备上播放
- HTML5视频自动播放/播放一次
- 格式.播放播放列表用于嵌入播放列表
- 加载和播放播放列表.m3u8在iPad上的特定时间启动
- jPlayer不播放播放列表对象的全局声明中的歌曲
- Flowplayer自动播放播放列表与视频之间的延迟
- 我需要帮助创建一个HTML5视频播放器与播放列表,自动播放播放列表中的所有视频