vue js获取视频播放时间
时间: 2023-07-18 13:12:55 浏览: 60
你可以使用HTML5 的 video 元素的 timeupdate 事件来获取视频播放的时间。下面是一个简单的示例代码:
```html
<video id="my-video" controls>
<source src="my-video.mp4" type="video/mp4">
</video>
<script>
// 获取 video 元素
const video = document.getElementById('my-video');
// 监听 timeupdate 事件
video.addEventListener('timeupdate', () => {
// 获取当前播放时间并打印到控制台
console.log('当前播放时间', video.currentTime);
});
</script>
```
在上面的示例中,我们首先获取了 video 元素,然后添加了一个 timeupdate 事件监听器。每当视频播放时间发生变化时,该事件会被触发,我们可以通过 video.currentTime 属性来获取当前播放时间,并将其打印到控制台上。
相关问题
vue js获取视频总时间
获取视频总时间同样可以使用 HTML5 的 video 元素,可以通过 video 元素的 duration 属性来获取视频的总时间。下面是一个简单的示例代码:
```html
<video id="my-video" controls>
<source src="my-video.mp4" type="video/mp4">
</video>
<script>
// 获取 video 元素
const video = document.getElementById('my-video');
// 监听 loadedmetadata 事件
video.addEventListener('loadedmetadata', () => {
// 获取视频总时间并打印到控制台
console.log('视频总时间', video.duration);
});
</script>
```
在上面的示例中,我们首先获取了 video 元素,然后添加了一个 loadedmetadata 事件监听器。该事件在视频的元数据(比如视频的长度、尺寸等)加载完成后触发,我们可以通过 video.duration 属性来获取视频的总时间,并将其打印到控制台上。
vue怎样获取视频时长
在Vue中获取视频时长可以通过使用HTML5的`video`元素来实现。`video`元素提供了一个`duration`属性,它返回视频的总时长(以秒为单位)。可以通过以下步骤获取视频时长:
1. 在Vue组件中添加一个`video`元素:
```html
<video ref="myVideo" src="video.mp4"></video>
```
2. 在Vue组件的`mounted`钩子中获取视频时长:
```javascript
mounted() {
const myVideo = this.$refs.myVideo;
myVideo.addEventListener('loadedmetadata', () => {
console.log(myVideo.duration); // 返回视频的总时长
});
}
```
在上面的代码中,我们使用`addEventListener`方法来监听`loadedmetadata`事件,该事件在视频元数据加载后触发。一旦元数据加载完成,我们就可以通过`duration`属性获取视频的总时长。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)