草庐IT

html 获取视频文件的宽高尺寸，怎么获取视频的宽度-解决方案

橙-极纪元 2024-01-01 原文

html代码

<video id="video" loop preload="auto" autoplay>
    <source src="1.mp4" type="video/mp4">
    您的浏览器不支持Video标签。
</video>

js代码

 var video=document.querySelector("#video");//当前视频对象;  
video.onloadedmetadata=function(res){
                    console.log('媒介元素的持续时间以及其他媒介数据已加载时运行脚本：',res);  
                    //窗体
                    var window_Width=window.innerWidth;
                    var window_Height=window.innerHeight;  
                    console.log('窗体-宽度：',window_Width);
                    console.log('窗体-高度：',window_Height);
                    //原视频
                    var videoWidth=video.videoWidth;
                    var videoHeight=video.videoHeight; 
                    console.log('原视频-宽度：',videoWidth);
                    console.log('原视频-高度：',videoHeight);
                    //视频根据窗体自动缩放
                    //公式-等比例缩放后的高=（缩放后的宽度/原始宽度）*原始高度
                    var Box_videoWidth=window_Width;
                    var Box_videoHeight=(window_Width/videoWidth)*videoHeight; //缩放后的高度
                    console.log('视频缩放-宽度：',Box_videoWidth);
                    console.log('视频缩放-高度：',Box_videoHeight);  
                    var total_height=window_Height-(that.topTitle_height+that.footNav_height);//视频容器总高度
                    
                    console.log('视频容器最大高度应为：',total_height);
                    
                }

控制台输出

窗体-宽度： 375
窗体-高度： 667
原视频-宽度： 1920
原视频-高度： 1080
视频缩放-宽度： 375
视频缩放-高度： 210.9375
视频容器最大高度应为： 571

 

视频标签文档

HTML 音频/视频 DOM 参考手册

HTML 音频/视频 | 菜鸟教程

HTML 音频/视频 方法

方法描述
addTextTrack()向音频/视频添加新的文本轨道。
canPlayType()检测浏览器是否能播放指定的音频/视频类型。
load()重新加载音频/视频元素。
play()开始播放音频/视频。
pause()暂停当前播放的音频/视频。

HTML 音频/视频属性

 

属性描述
audioTracks返回表示可用音频轨道的 AudioTrackList 对象。
autoplay设置或返回是否在加载完成后随即播放音频/视频。
buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象。
controller返回表示音频/视频当前媒体控制器的 MediaController 对象。
controls设置或返回音频/视频是否显示控件（比如播放/暂停等）。
crossOrigin设置或返回音频/视频的 CORS 设置。
currentSrc返回当前音频/视频的 URL。
currentTime设置或返回音频/视频中的当前播放位置（以秒计）。
defaultMuted设置或返回音频/视频默认是否静音。
defaultPlaybackRate设置或返回音频/视频的默认播放速度。
duration返回当前音频/视频的长度（以秒计）。
ended返回音频/视频的播放是否已结束。
error返回表示音频/视频错误状态的 MediaError 对象。
loop设置或返回音频/视频是否应在结束时重新播放。
mediaGroup设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。
muted设置或返回音频/视频是否静音。
networkState返回音频/视频的当前网络状态。
paused设置或返回音频/视频是否暂停。
playbackRate设置或返回音频/视频播放的速度。
played返回表示音频/视频已播放部分的 TimeRanges 对象。
preload设置或返回音频/视频是否应该在页面加载后进行加载。
readyState返回音频/视频当前的就绪状态。
seekable返回表示音频/视频可寻址部分的 TimeRanges 对象。
seeking返回用户是否正在音频/视频中进行查找。
src设置或返回音频/视频元素的当前来源。
startDate返回表示当前时间偏移的 Date 对象。
textTracks返回表示可用文本轨道的 TextTrackList 对象。
videoTracks返回表示可用视频轨道的 VideoTrackList 对象。
volume设置或返回音频/视频的音量。

HTML 音频/视频事件

事件描述
abort当音频/视频的加载已放弃时触发。
canplay当浏览器可以开始播放音频/视频时触发。
canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发。
durationchange当音频/视频的时长已更改时触发。
emptied当目前的播放列表为空时触发。
ended当目前的播放列表已结束时触发。
error当在音频/视频加载期间发生错误时触发。
loadeddata当浏览器已加载音频/视频的当前帧时触发。
loadedmetadata当浏览器已加载音频/视频的元数据时触发。
loadstart当浏览器开始查找音频/视频时触发。
pause当音频/视频已暂停时触发。
play当音频/视频已开始或不再暂停时触发。
playing当音频/视频在因缓冲而暂停或停止后已就绪时触发。
progress当浏览器正在下载音频/视频时触发。
ratechange当音频/视频的播放速度已更改时触发。
seeked当用户已移动/跳跃到音频/视频中的新位置时触发。
seeking当用户开始移动/跳跃到音频/视频中的新位置时触发。
stalled当浏览器尝试获取媒体数据，但数据不可用时触发。
suspend当浏览器刻意不获取媒体数据时触发。
timeupdate当目前的播放位置已更改时触发。
volumechange当音量已更改时触发。
waiting当视频由于需要缓冲下一帧而停止时触发。

HTML 事件属性-全局事件属性

HTML 事件 | 菜鸟教程

多媒体事件(Media Events)

属性值描述
onabortscript当发生中止事件时运行脚本
oncanplayNewscript当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythroughNewscript当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchangeNewscript当媒介长度改变时运行脚本
onemptiedNewscript当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onendedNewscript当媒介已抵达结尾时运行脚本
onerrorNewscript当在元素加载期间发生错误时运行脚本
onloadeddataNewscript当加载媒介数据时运行脚本
onloadedmetadataNewscript当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstartNewscript当浏览器开始加载媒介数据时运行脚本
onpauseNewscript当媒介数据暂停时运行脚本
onplayNewscript当媒介数据将要开始播放时运行脚本
onplayingNewscript当媒介数据已开始播放时运行脚本
onprogressNewscript当浏览器正在取媒介数据时运行脚本
onratechangeNewscript当媒介数据的播放速率改变时运行脚本
onreadystatechangeNewscript当就绪状态（ready-state）改变时运行脚本
onseekedNewscript当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseekingNewscript当媒介元素的定位属性为真且定位已开始时运行脚本
onstalledNewscript当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspendNewscript当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdateNewscript当媒介改变其播放位置时运行脚本
onvolumechangeNewscript当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaitingNewscript当媒介已停止播放但打算继续播放时运行脚本
html获取tdtrrunoob音视频csshtml5怎么获取视频的宽度

有关html 获取视频文件的宽高尺寸，怎么获取视频的宽度-解决方案的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  3. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  4. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  5. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  6. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  7. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  8. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  9. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  10. Ruby 写入和读取对象到文件 - 2

    好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

随机推荐