videojs获取视频播放进度和浏览时长

最新推荐文章于 2024-06-11 15:13:58 发布
最新推荐文章于 2024-06-11 15:13:58 发布
阅读量1.3w 收藏 40
点赞数 5
文章标签： javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/test_appletwo/article/details/121119901
版权

需求：

1：获取视频播放进度

2：获取用户浏览时长

实现注意事项

1：调用video.js  video.css

2：视频播放时计时，停止、缓冲时、关闭网页时浏览时长计算停止，并将数据上传到服务器

html
 

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Video.js | HTML5 Video Player</title>
    <link href="http://vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/7.0/video.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

  <video id="demo-video" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <source id="demo" src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  </video>
	观看时长：<input type="text" id="aa" value="0">
	当前时间：<input type="text" id="bb" value="0">
</body>

</html>

js代码

<script>
$(document).ready(function () {
    var options = {
    };       
    var player = videojs('demo-video', options, function onPlayerReady() {
        var time1;
        var t1 = 0;
        function aa() {
            t1 += 0.1;
            document.getElementById('aa').value = t1;
            console.log('aa-' + t1);
            var currentTime = document.getElementById("demo-video").firstChild.currentTime;
            document.getElementById('bb').value = currentTime;
            console.log('当前播放时间'+ currentTime);            
        }
        //结束和暂时时清除定时器，并向后台发送数据
        this.on('ended', function () {
            console.log('结束播放');
            window.clearInterval(time1);
            countTime();   //向后台发数据
        });
        this.on('pause', function () {
            console.log('暂停播放');
            window.clearInterval(time1);
            countTime();  //向后台发数据
        });
        this.on('ended', function() {//播放结束
            console.log("播放结束");
            window.clearInterval(time1);
        });
        this.on('waiting', function () {
            console.log('等待加载');
            window.clearInterval(time1);
            countTime();   //向后台发数据
          })
        //开始播放视频时，设置一个定时器，每100毫秒调用一次aa(),观看时长加1秒
        this.on('playing', function () {
            console.log('开始播放');
            time1 = setInterval(function () {
                aa();
            }, 100);                               
        });     
    });
    //直接关闭页面，并向后台发送数据
    if(window.addEventListener){
        window.addEventListener("beforeunload",countTime,false);
    }else{
        window.attachEvent("onbeforeunload",countTime);
    }
})
 
function countTime() {
            var sTime = $("#aa").val();
            var currentTime = $("#bb").val();
            console.log(sTime+'=='+currentTime+'发往后台');            
        }
</script>

test_appletwo
关注
  • 5
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
video 获取进度时长（播放位置）、总时长、禁止拖动进度条
qq_22574487的博客
06-25 1418
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <video id="video-active" class="video-active" width="640" height="
Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理
weixin_41827052的博客
03-21 4811
Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理 <video id="myVideo" controls="controls"> <source type="video/mp4" src="mi.mp4"> </video> <script> function videoInit(){ let elevideo = document.getElementById('myVideo');
js获取视频长度的3种方法
热门推荐
飙歌的博客
11-15 1万+
基本选择框： <div class="form-group col-sm-12"> <label class="control-label">获取时长1。。。。</label> <input class="form-control" type="file" id="test" οnchange="getTime()"> </div> 获取方式： 第一种，监听onloadedmetadata ： functi...
通过一个video获取所有视频时长
最新发布
weixin_44133966的博客
06-11 380
标签，并且你有权限访问所有视频文件。此外，由于浏览器的同源策略，你可能需要确保视频文件的服务器支持跨域资源共享（CORS）。如果视频文件不在同一个域上，你可能需要服务器端的支持来设置适当的CORS头部。在JavaScript中，如果你想要获取一个视频数组中所有视频的时长，但是页面上只有一个。标签，你可能需要使用JavaScript来动态地更改这个标签的。属性来加载不同的视频文件，并在每次加载完成后获取视频的时长。请注意，这个示例代码假设你的HTML页面中已经有一个。
【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs
此人太懒，没有任何简介
03-06 5957
【VideoJs】vue3中使用videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器
js获得当前视频播放的状态
m0_68094390的博客
05-21 7699
要获得视频播放的状态，可以使用HTML5的video对象，该对象包含了许多有用的属性和方法，可以方便地控制视频播放。示例1：判断视频是否处于暂停状态。示例2：判断视频是否已经播放完毕。示例3：获取当前视频播放的时间。示例4：获取视频总长度。示例5：播放和暂停视频。
JS--获取上传视频文件的时长(秒)
chang_xixi的博客
09-27 1062
【代码】JS--获取上传视频文件的时长(秒)
前端开发-js-视频播放时长实时记录
04-10
自己写的一个用于记录视频播放时长的js，通过video标签的事件处理实现，文末有使用示例，引入即用。
vue 获取视频时长的实例代码
10-16
在Vue.js应用中，获取视频时长是一项常见的需求，特别是在处理用户上传的视频文件时，可能需要预览视频时长来提供更好的用户体验或进行格式验证。以下是一个关于如何在Vue中获取视频时长的实例代码解析。 首先，...
Videojs 网页 播放器
05-18
获取视频总时长（在Flash模式下可能无效）： ```javascript var duration = myPlayer.duration(); ``` 监控缓冲状态： ```javascript var buffered = myPlayer.buffered(); var bufferedPercent = myPlayer....
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放；Java视频流播放
01-16
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放，视频播放后才能操作其他内容。 内含Java视频流播放，本人并不建议直接将视频路径放到src中，而是使用视频流方式获取
html，js实现时间轴，可播放视频，点击放大图片
08-12
例如，添加`play()`和`pause()`方法控制播放状态，使用`currentTime`属性获取或设置视频播放位置，`duration`属性则可以获取视频总时长。 至于图片预览功能，通常在时间轴上显示缩略图，点击后放大显示全图。可以...
前端如何获取音视频时长（包括只有文件没地址情况时）
weixin_50236973的博客
07-31 2582
【代码】前端如何获取音视频时长（包括只有文件没地址情况时）
在vue项目中使用video.js实现视频播放和视频进度条打点
不怕麻烦的鹿丸的博客
02-24 1万+
严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。markerStyle配置的是各个打点的默认颜色，如果要每个打点都有自己各自的颜色，可以在markers里给每个打点添加class名字，然后在css里单独设置颜色。Video.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。此选项将用于Video.js（即video.novtt.js）的“novtt”版本中。
HTML5中video元素事件详解（实时监测当前播放时间）
Goaread的博客
03-20 4459
事件描述loadstart浏览器开始在网上寻找媒体数据progress浏览器正在获取媒体数据suspend浏览器暂停获取媒体数据，但是下载过程并滑正常结束abort浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的error获取媒体数据过程中出错emptiedvideo元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误2.在浏览器正在选择支持的播放格式时，又调用 了load方法重新载入媒体stalled。
video 标签 监听播放、暂停、结束等事件
c_qianxia5040的博客
01-30 1万+
<video id="video" controls="controls"> <source type="video/mp4" src="xxx.mp4"> </video> 获取视频总时长 var elevideo = document.getElementById("video"); elevideo.addEventListener('loadedmetadata', function () { //加载数据 //视频的总长度
vue获取video视频时长和当前播放进度时间，解决出现NaN或者undefined的问题
hyswl666的博客
05-15 7263
这里注意的是：video 这个方法用js的方法写在外面不要写在生命周期之类的里面，不然就会有报错nan或者undefined。canplay：视频准备就绪可以播放的时候触发的事件。video标签添加canplay事件。
JavaScript如何获取5个视频文件的总时长？
长风破浪会有时的博客
05-05 1011
获取多个视频文件的总时长，可以使用JavaScript中的Promise.all()方法，将所有获取总时长的Promise对象组成的数组作为参数传递给Promise.all()方法，返回的是一个Promise对象，可以通过then()方法获取到所有视频文件的总时长之和。
前端demo: COS上传图片、视频、文件的一些点
weixin_49015558的博客
07-11 641
前端demo: COS上传图片、视频、文件的一些点
videojs获取视频播放状态的回调函数
08-05
### 回答1： 您可以使用Video.js的事件监听器来获取视频播放状态的回调函数。以下是一些常用的事件监听器： - `play`: 当视频开始播放时触发。 - `pause`: 当视频暂停时触发。 - `ended`: 当视频播放结束时触发。 - `timeupdate`: 当视频播放时间更新时触发。 您可以使用以下代码来监听这些事件： ```javascript var player = videojs('my-video'); player.on('play', function() { console.log('视频开始播放'); }); player.on('pause', function() { console.log('视频暂停'); }); player.on('ended', function() { console.log('视频播放结束'); }); player.on('timeupdate', function() { console.log('视频播放时间更新'); }); ``` 您可以根据自己的需要，选择适当的事件监听器来获取视频播放状态的回调函数。 ### 回答2： videojs是一个流行的HTML5视频播放器，它提供了一些回调函数来获取视频播放状态。 1. `play`：这个回调函数在视频开始播放时被触发。你可以在其中执行一些操作，比如显示播放按钮变为暂停按钮。 2. `pause`：这个回调函数在视频暂停时被触发。你可以在其中执行一些操作，比如显示暂停按钮变为播放按钮。 3. `ended`：这个回调函数在视频播放结束时被触发。你可以在其中执行一些操作，比如重新设置视频的播放时间为0。 4. `timeupdate`：这个回调函数在视频播放进度更新时被触发。你可以在其中获取视频的当前播放时间，并进行一些操作，比如更新进度条的位置。 除了上述的回调函数，videojs还提供了一些方法来获取视频的播放状态。比如： 1. `currentTime()`：这个方法返回视频的当前播放时间。你可以通过调用这个方法获取视频的当前播放时间。 2. `duration()`：这个方法返回视频的总播放时间。你可以通过调用这个方法获取视频的总播放时间。 通过以上回调函数和方法，你可以轻松地获取视频的播放状态并执行相应的操作。比如在`play`回调函数中可以显示暂停按钮，而在`pause`回调函数中可以显示播放按钮，以此来与用户的操作状态进行同步。 ### 回答3： videojs是一个开源的HTML5视频播放器库，可以通过JavaScript来控制视频的播放状态。要获取视频播放状态的回调函数，可以使用videojs提供的事件监听器来实现。 首先，需要在HTML页面中嵌入video标签，并引入videojs的库文件。然后在JavaScript中初始化videojs播放器对象，如下所示： ``` var player = videojs('my-video'); ``` 然后，可以使用player对象的on方法来监听不同类型的事件。要获取视频的播放状态，可以监听playing和ended事件。当视频播放时，会触发playing事件，而当视频播放结束时，会触发ended事件。可以通过回调函数来处理这些事件。 示例代码如下： ``` var player = videojs('my-video'); // 监听playing事件 player.on('playing', function() { console.log('视频正在播放'); }); // 监听ended事件 player.on('ended', function() { console.log('视频播放结束'); }); ``` 上述代码中，使用console.log输出了不同的播放状态。根据实际需求可以根据需要来处理不同的播放状态，例如显示或隐藏一些UI元素、更改视频的样式等等。 总结起来，要获取视频播放状态的回调函数，可以使用videojs的事件监听器来监听playing和ended事件，并通过回调函数来处理不同的播放状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值