【Web前端问题】关于js中.height和.videoHeight的未知问题?

图片描述
其中html和js中均没有给出video元素的height的高度,为何我用alert(vid.videoHeight)
和alert(vid.height),弹出值为272呢?然后我在html文件中添加video元素style="height:200px",.height和.videoHeight弹出值还是272,只有.style.height显示为200px。接着我把js文件清空,只剩alert(document.getElementById("movie").videoHeight或height)这一句,弹出值却为0,其中272的值是怎么发生的我想知道。
图片描述
图片描述
图片描述

这是全部js代码
(function() {
function createVideoControls() {
var vids = document.getElementsByTagName('video');
for (var i = 0 ; i < vids.length ; i++) {

addControls( vids[i] );

}
}

function addControls( vid ) {

vid.removeAttribute('controls'); vid.height = vid.videoHeight;
vid.width = vid.videoWidth;
vid.parentNode.style.height = vid.videoHeight + 'px';
vid.parentNode.style.width = vid.videoWidth + 'px';

var controls = document.createElement('div');
controls.setAttribute('class','controls');

alert(vid.videoHeight);
var play = document.createElement('button');
play.setAttribute('title','Play');
play.innerHTML = '►';

controls.appendChild(play);

vid.parentNode.insertBefore(controls, vid);

play.onclick = function () {

if (vid.ended) {

vid.currentTime = 0;

}

if (vid.paused) {

vid.play();

} else {

vid.pause();

}

};

vid.addEventListener('play', function () {

play.innerHTML = '▐▐';

play.setAttribute('paused', true);

}, false);

vid.addEventListener('pause', function () {

play.removeAttribute('paused');

play.innerHTML = '►';

}, false);

vid.addEventListener('ended', function () {

vid.pause();

}, false);
}

window.onload = function() {
createVideoControls();
}
})()

另外请解释下video元素的.height和.videoHeight的区别。
非常感谢!!

回答:

videoHeight和videoWidth是实际视频的尺寸,可以读取不可设置。
.height和.width是播放器尺寸,当播放器设定成一个固定尺寸的时候,视频会选取超出比例的一方显示全,另一方垂直或水平居中两端留黑或透明。
值是0的原因是视频没有加载完全,小米会出现这个问题,ios页面load完了就有值了
测试机型: ios:5、6Plus 安卓:红米

以上是 【Web前端问题】关于js中.height和.videoHeight的未知问题? 的全部内容, 来源链接: utcz.com/a/141878.html

回到顶部