Question

我有这个HTML代码：

<embed type="application/x-vlc-plugin"
   pluginspage="http://www.videolan.org"
   version="VideoLAN.VLCPlugin.2"  
   width="600"        
   height="350"
   id="vlc" 
   loop="yes"
   autoplay="yes" 
   target="myvideo.mp4"></embed>

我希望强制我的视频以16：9的宽高比播放。

如何做到这一点？

<embed type="application/x-vlc-plugin"
   pluginspage="http://www.videolan.org"
   version="VideoLAN.VLCPlugin.2"  
   width="600"        
   height="350"
   id="vlc" 
   aspectRatio="16:9"
   loop="yes"
   autoplay="yes" 
   target="myvideo.mp4">

Answer 1

Bootstrap示例

我建议使用bootstrap http://getbootstrap.com/components/#responsive-embed

<head>
  <script src="http://someresource.com"></script>
</head>

纯CSS示例

＆＃13;

<div class="embed-responsive embed-responsive-16by9">
 <embed type="application/x-vlc-plugin"
   pluginspage="http://www.videolan.org"
   version="VideoLAN.VLCPlugin.2"  
   width="600"        
   height="350"
   id="vlc" 
   loop="yes"
   autoplay="yes" 
   target="myvideo.mp4"></embed>
</div>

＆＃13;

body, html {
  height: 100%;
}

body {
  background: #252527;
  font-family: "Open Sans", sans-serif;
  color: white;
  
}

.box {
    background: skyblue;
    
  }

.container {
  max-width: 700px;
  margin: 0 auto;
  background: lighten(black, 25%);
  min-height:100%;
  padding: 1em;
}

.sixteen-nine {
  position: relative;
  animation: resize 3s  infinite alternate;  
}

.sixteen-nine:before {
  display: block;
  content: " ";
  width: 100%;
  padding-top: 56.25%;
}

.sixteen-nine > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

span {
  font-weight: bold;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  color: black;

}

@keyframes resize {
  from {width:25%}
  to {width:100%}
}

＆＃13;

我从https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

转换为css示例

我的示例http://codepen.io/marti1125/pen/MKQKRL?editors=1000

如何使vlc网络播放器始终使用16：9的宽高比？

1 个答案: