相关疑难解决方法(0)

更新:好的,虽然我没有完全解决这个问题,但我确实找到了一个处理我最关心的工作......用户体验.

首先视频没有开始加载,直到观众点击播放按钮,所以我假设持续时间信息不可用(我不知道如何解决这个特定问题...虽然我假设它只涉及将视频元数据与视频分开加载,但我甚至不知道这是否可行).

因此,为了解决没有持续时间数据的事实,我决定完全隐藏持续时间信息(实际上是整个控件),直到你点击播放.

我知道......它的作弊.但是现在它让我开心:)

那说...如果有人知道如何从视频文件中分别加载视频元数据...请分享.我认为应该彻底解决这个问题.

我正在开发一个带有自定义界面的HTML5视频播放器,但是我在显示视频持续时间信息方面遇到了一些问题.

我的HTML非常简单(见下文)

<video id="video" poster="image.jpg" controls>     
    <source src="video_path.mp4" type="video/mp4" />
    <source src="video_path.ogv" type="video/ogg" /> 
</video>
<ul class="controls"> 
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li>  
</ul>

我用来获取和插入持续时间的javascript是

var duration = $('#duration').get(0);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

问题是没有任何反应.我知道视频文件有持续时间数据,因为如果我只使用默认控件,它显示正常.

但真正奇怪的是,如果我将警报(持续时间)放在我的代码中,就像这样

alert(duration);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

然后工作正常(减去弹出的烦人警报).任何想法在这里发生了什么或如何解决它？

我试图在响应式设计中显示视频,以便缩放边框融入背景.

我允许视频元素的尺寸在指定的范围内变化.因此,当视频播放没有填充实际的html元素时,我的视频周围会出现黑色填充条.

使用css background属性,我可以更改Chrome,FireFox和Opera中显示的条形颜色.我无法弄清楚如何更改Internet Explorer或iOS(ipad)显示的颜色.

任何人都可以帮我解决这个问题吗？

根据要求提供小提琴:http://jsfiddle.net/swaEe/

html:

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

css:

video {
    width: 500px;
    background: blue;
}

***_编辑_ ***

这是一个更好的小提琴:http://jsfiddle.net/swaEe/40/

视频播放应在容器中垂直和水平居中.我希望"条形"透明或与容器颜色相同(在这种情况下为红色......).

<div style="width:200px; height:600px; background-color:red;">
    <video width="100%" height="100%" style="background-color:red;" controls>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;"> …