精华内容
下载资源
问答
  • h5配合javascript通过video标签获取视频时长 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <...

    h5配合javascript 通过video标签获取视频时长


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="file" id='upload'>
    <button onclick='getVideoTime()'>获取时长</button>
    </body>
    <script>
        function getVideoTime() {
            var fileVIdeo =  document.getElementById("upload").files[0]
            var url = URL.createObjectURL(fileVIdeo);
            var audioElement = new Audio(url);
            audioElement.addEventListener("loadedmetadata", function (_event) {
                var duration = audioElement.duration;
                console.log("视频时长:"+duration+"秒");
            });
        }
    </script>
    </html>

     

    展开全文
  • vue / js使用video获取视频时长

    千次阅读 2018-07-24 14:28:00
    项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长: ...

    项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长:

    没有时长怎么办呢,只能用原生JS来获取:

    上传成功以后,将成功的路径绑定给video

    使用js获取duration并赋给时间参数

    这时你会发现,你得到的值是NaN

    视频还未加载下来,无法同步获取到,使用定时器即可解决

    OK了,现在可以获取到了

     

     希望本文对你有所帮助!

     

    转载于:https://www.cnblogs.com/wangqiao170/p/9359760.html

    展开全文
  • API介绍MediaStream.addTrack()向流媒体中加入轨MediaStream.removeTrack()从流媒体中将轨移除MediaStream.getVideoTracks()获取流媒体中所有视频轨MediaStream.getAudioTracks()获取流媒体中所有音频轨MediaStream....

    API介绍

    MediaStream.addTrack()向流媒体中加入轨
    MediaStream.removeTrack()从流媒体中将轨移除
    MediaStream.getVideoTracks()获取流媒体中所有视频轨
    MediaStream.getAudioTracks()获取流媒体中所有音频轨
    MediaStream.onaddTrack向流媒体中加入轨时触发的事件
    MediaStream.onremoveTrack从流媒体中将轨移除时触发的事件
    MediaStream.onended流结束时触发的事件

    代码实例

    首先通过nodejs搭建web服务器,搭建好后将服务启动。然后在public目录下新建一个constrant目录,在constrant目录下创建一个index.html文件,代码内容如下:

     webrtc获取音视频约束信息
    视频约束信息:

    然后在constrant目录下新建一个js目录,在js目录下创建一个client.js文件,代码内容如下:

    'use strict'var player = $("#player")[0];var videoConstrantsDiv = $("#videoConstrants")[0];start();function start(){ if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { console.log('不支采集音视频数据!'); }else{ // 采集音视频数据 var constrants = { video:{ width:320,  height:240,  aspectRatio:1.33, // 宽高比,这个由宽除以高计算,一般不用设置 frameRate:20,  facingMode:"environment", // 摄像头面对模式,user是面向使用者(前置摄像头),environment是后置摄像头,left前置左摄像头,right前置右摄像头 resizeMode:"none", // 裁剪模式,none为不裁剪(不常用) }, audio:{ volume:1.0, // 音量,0静音,1最大声音 sampleRate:44100,// 采样率 sampleSize:8, // 采样大小(每一个样用多少位表示) echoCancellation: true, // 是否开启回音消除 autoGainControl:true, // 是否开启自动增益,也就是在原有录制的声音的基础上是否增加音量 noiseSuppression:true, // 是否开启降噪 latency: 0.2, // 延迟大小,在直播过程中latency设置的越小实时性会越好,但是网络不好时容易出现卡顿;设置的越大流畅度越好,但是设置太大会有明显的延迟。一般设置500ms,设置为200ms实时效果就很好了,大于500ms就能明显感觉到延迟了。 channelCount:1, // 声道数,一般设置单声道就够了 } }; navigator.mediaDevices.getUserMedia(constrants).then(gotMediaStream).catch(handleError); }}// 采集音视频数据成功时调用的方法function gotMediaStream(stream){ player.srcObject = stream; // 获取视频轨 var videoTrack = stream.getVideoTracks()[0]; // 获取视频轨的第一个轨 var videoConstrants = videoTrack.getSettings(); // 获取约束信息 // 将视频轨约束信息转换为json格式(2表示缩进位数)并展示在页面上 videoConstrantsDiv.textContent = JSON.stringify(videoConstrants,null,2);}// 采集音视频数据失败时调用的方法function handleError(err){ console.log(err.name+':'+err.message);}

    然后打开浏览器在地址栏输入https://192.168.20.242:8081/constrant/index.html,等出现视频后视频下面会展示视频的约束信息,如下图所示:

    af9f01a6889ca943bd5785605f136433.png

    视频约束信息

    更多音视频免费视频资料获取 后台私信【音视频】

    本人还有一个音视频多人通话实战项目 需要可以私信我

    76be1176d1b52d440453505dfb2775f6.png
    c05277bd11a95e2e978900088a36f6c2.png
    69740ad18e69e37194db0d99821ed3c9.png
    展开全文
  • js获取video的播放时长

    千次阅读 2019-10-03 03:40:10
    1 setTimeout(function () { 2 var vid = document.getElementById("videoIntro"); 3 var currentTime=vid.currentTime.toFixed(1); 4 if(currentT...
     
     1 setTimeout(function () {
     2               var vid = document.getElementById("videoIntro");
     3               var currentTime=vid.currentTime.toFixed(1);
     4               if(currentTime==1.2){
     5                   //触发
     6                   return false;
     7               }
     8               console.log(currentTime);
     9               getvideoprogress();
    10           }, 1000);
    11   function getvideoprogress() {
    12     setTimeout(function () {
    13               var vid = document.getElementById("videoIntro");
    14               var currentTime=vid.currentTime.toFixed(1);
    15               if(currentTime==1.2){
    16                   //触发
    17                   return false;
    18               }
    19               console.log(currentTime);
    20               getvideoprogress();
    21           }, 1000);
    22   }

     

    转载于:https://www.cnblogs.com/chenlove/p/9284818.html

    展开全文
  • 目前大部分的指标,比如白屏时间,dom 加载时间等等,都能通过现代浏览器提供的各种 api 去进行较为精确的获取,而今天讲的这个指标,以往获取他的方式只能是通过逻辑埋点去获取它的值,因此在做一些前端监控,...
  • video标签的属性duration能够获取视频的时长,但是需要先获取到视频元素video,再通过video.duration获取到对应视频元素的时长 解决办法:隐藏视频元素,仍然通过video.duration的方式获取到时长 // template: <...
  • uni-app video 获取视频总时长

    千次阅读 2020-11-06 15:01:49
    uni-app video 获取视频总时长 接到公司的一个需求,在uni-app开发的小程序和h5页面的商品详情轮播图中添加一个视频,后台返回视频src,但没有返视频时间,怎么办呢,只能自己动手了。记录一下实现过程中遇到的一些...
  • video.js 获取多个 video 和多个 audio 的长度以及播放时长 话不多说,线上我的客户的需求: 客户:‘我们现有的视频播放有个逻辑在里面:如果没选课,可以随意拖拽,不记进度;如果选了课程,则进度不可拖拽,...
  • 最近在做今日头条文章数据抓取的过程中,发现视频地址的获取较为复杂。在源码与浏览器配合下发现对应的解决思路,故此记录一下。目录私信小编01即可获取大量Python学习资料需要的Python模块实现思路代码及运行结果...
  • video id="my_video_1" controls="controls" style=" width: 700px; height: 420px; margin: 0 auto; padding-top: 0px;"> <source src="@ViewBag.Url " type="application/x-mpegURL"> </vi...
  • 因不能创建视频对象,所以创建音频对象,将url放入其中,测试发现,可以算出时间,但是视频过大时,多次切换点击时,发现所有展示的图片消失不见,包括静态图片(放弃此方法)... 暂时不考虑增加字段存放视频时长。 ...
  • 关于页面加载时video时长获取为NaN

    千次阅读 2019-06-25 14:52:51
    最近有个需求获取页面加载时video时长 疑问 起初代码是这样的 <video id="joinVideo" controls="controls"> <source src="moive1.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </...
  • html 获取视频时长HTML5 video is exciting, if only for the reason that we no longer need Flash or other third party plugins to rendermedia. We can also create custom controls and displaysaround the ...
  • 这是本人的第一个博客,今天主要说明video的用的较少的一些功能,像play,...获取video的视频时长 获取视频时长是最基本也最简单的,通过video.duration,以秒为单位,但该属性放在任何监听事件之前并不能拿到真实的值...
  • 点击观看视频 ↓↓↓登录功能-获取用户信息https://www.zhihu.com/video/1197565925019570176课程文字版1、安装SDK插件SDK插件用来获取用户的openIdSDK是server端(也就是后端)的插件,帮助我们很容易的获取openId...
  • 常看视频的朋友都应该知道,许多作者喜好在自己视频的结尾配上一些音乐作为点缀。...https://www.zhihu.com/video/1173176802355884032 本篇文章大约需要3分钟来阅读,届时你将学到:如何在使用youtube_dl及ffm...
  • 方法一:在项目开发过程中,需要获取音视频文件时长。查询资料后发现 JAVE能够完美得到想要的结果,JAVE项目简介如下:The JAVE (Java Audio Video Encoder) library is Java wrapper on the ffmpeg project. ...
  • 因为最近做http://www.sdfymj.com/video/这个视频站点,需要用到获取视频时长的方法,今天顺便分享给大家//获得视频文件的总长度时间和创建时间 根据视频长度判断是否失效public function getTime($url){//获取视频...
  • 当我尝试使用php-ffmpeg包装器和ffprobe获取视频的持续时间,我得到一个巨大的对象而不仅仅是持续时间.$ffprobe = FFMpeg\FFProbe::create();$ffprobe->format($this->videoFile)->get('duration');$this-...
  • PHP获取视频、音频文件详细信息【文件大小、视频时长、视频编码详情、音频编码详情、视频高度宽度等】,不需要安装和配置环境(不像mpeg),直接引入到项目中即可使用,非常方便。
  • 关于微信浏览器video标签获取第一帧和总时长的问题 最近项目中需要上传视频并限制播放时长。还要展示第一帧画面 技术实现。通过Input file 获取上传的视频资源,读取之后转成blob,放到video标签上。然后获取第一帧...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 220
精华内容 88
关键字:

获取video时长