前端开发中,苹果手机怎么获取video标签的时长

前端开发中,苹果手机怎么获取video标签的时长,第1张

虽然我不懂视频获取及处理,但是你说的我明白,就是安卓的权限比较开放,苹果同样的方法行不通。

网页链接这是无意中看到的解决方法,你可以尝试一下!希望能够有效。

var hour = Mathfloor (video1duration / 3600);

var other = video1duration % 3600;

var minute = Mathfloor (other / 60);

var second = (other % 60)toFixed (2);

documentgetElementById ('duration')innerHTML = hour + '时' + minute + '分' + second + '秒';

前端项目中,有个视频能播放srt字幕并能循环复读指定区间的功能要求,研究了下,思路如下:

1、web端关于视频 都用框架videojs 还挺方便,直接给video 标签初始化,设置宽、高、自动播放、缩略图等,并能监听播放,拖放

2、将srt 字幕文件 进行读取,并转为对象数组

srt格式为:

转化为对象数组:

[     {sn: "0", startTime: 089, endTime: 789, content: "For me traveling isn't about visiting the major areas, taking a photo and crossing it:"},

     {sn: "1", startTime: 838, endTime: 1485, content: "It's about understanding and immersing yourself in a different culture"}

   ]

3、监听timeupdate 函数,将转为的字幕数组根据时间线 随时播放出来,将当前时间 playercurrentTime() 和字幕初始时间 和 结束时间进行比较

实现为:

4、复读功能 ,还是监听timeupdate 当播放时间超过后,重新设置播放时间为初始时间,实现反复播放

有需求,请互相讨论 Q 1873893691

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml,输入问题基础代码。

2、在indexhtml中的<script>标签中,输入js代码:

setTimeout(fun, 1201000);

function fun() {

$('video')attr('controls', 1);

}

3、浏览器运行indexhtml页面,此时运行2分钟后,才会显示出控制条。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8" />

<title>lasthtml</title>

<style>

</style>

<script type="text/javascript" src="jquery-180minjs"></script>

<script type="text/javascript">

jQuery (function ($)

    {

    $ (':button')click (function ()

    {

    var duration = $ ('video')prop ('duration');

    $ ('video')prop ('currentTime', duration  50 / 100);

    });

    });

</script>

</head>

<body>

<video src="mp4_1flv" autoplay="autoplay" controls="controls"></video>

<input type="button" value="change" />

</body>

</html>

以上就是关于前端开发中,苹果手机怎么获取video标签的时长全部的内容,包括:前端开发中,苹果手机怎么获取video标签的时长、JS 如何把 duration 秒 转为 时分秒显示 currentTime、video.js 视频加载srt字幕播放,并循环区间复读等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9773993.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存