HTML5 <video> 宽度和高度

Posted 2023-03-12

【中文标题】HTML5 <video> 宽度和高度

【英文标题】：HTML5 <video> width and height

【发布时间】：2012-02-03 15:01:01

【问题描述】：

我正在努力在我的网页上制作带有video 标签的视频。

我正在使用 FlareVideo 创建我的视频标签。我可以让视频在我需要的所有浏览器（IE 7/8/9、Firefox、Chrome、Safari）上运行。

问题是，当我设置宽度和高度时，看起来 Safari 和 Chrome 根本不在乎，只是设置了正确的宽度，但高度太高了。

另外，对于 IE 7 和 8，当浏览器不支持 html5 视频时使用的 flash 播放器太小。

希望有人可以帮忙 谢谢

编辑：添加代码

HTML 代码

<div id="flarevideo" class="video-player" style="display:none;"></div>

javascript 代码

function vidSwap(vidURL, awidth, aheight) 
    var pwidth = 720;
    var pheight = 406;
    $("div.video-player").show();
    fv = $("#flarevideo").flareVideo(
        flashSrc: window.pathToFlashVideo,
        width: pwidth,
        height: pheight,
        autobuffer: false,
        preload: false
    );
    fv.load([
        
            src: '[server address]' + vidURL +'.mp4',
            type: 'video/mp4'
        ,
        
            src: 'server address]' + vidURL + '.ogv',
            type: 'video/ogg; codecs="theora, vorbis"'
        
    ]); 

请注意，javascript 与应有的有点不同（此处的宽度和高度是硬编码的，而不是使用我的函数的两个参数）。 此外，vidUrl 的格式为“/[不带扩展名的视频名称”] 而且，window.pathToFlashVideo 是 flash 后备的路径，在我的 html 页面上定义

【问题讨论】：

你的视频是什么尺寸，你想把它设置成什么尺寸？

我的视频大小为 720X406 像素，我正在尝试将其设置为精确。查看 html/js 的帖子

在做一些研究的同时，我也发现了这个和我有同样问题的人***.com/questions/9128334/…

【参考方案1】：

似乎问题来自包含视频的 div 的 CSS。我删除了 height:100% 现在它工作正常。

希望这可以帮助遇到同样问题的其他人

【讨论】：

好建议 - 如果您使用 twitter bootstrap 或其他框架，尤其值得记住（更何况不使用它们，imo...）