vue播放视频 记录时间

在Vue中播放视频并记录时间的方法如下：

首先，你可以使用vue-video-player插件来实现视频播放功能。在该插件中，你可以使用@timeupdate属性来监听视频播放时间的变化，并将其赋值给data中的playTime属性。同时，你还可以根据需要定义其他属性和方法。

在代码中，你可以使用以下方式调整播放按钮的样式：

<style scoped>
.video-js .vjs-big-play-button{
    /* 播放按钮换成圆形 */
    height: 2em;
    width: 2em;
    line-height: 2em;
    border-radius: 1em;
}
</style>

在data部分，你可以定义一些相关的属性，例如id、userId、courseId等，并初始化playTime为0。同时，你还可以设置playerOptions对象来配置视频播放器的选项，如播放速度、是否自动播放、是否静音等。你可以指定视频的源文件路径和类型，并可以设置封面图片和控制栏的显示方式。

data() {
    return {
        id: 0,
        userId: 1,
        courseId: 1,
        playTime: '0',
        sectionId: 1,
        paused: true,
        playerOptions: {
            playbackRates: [0.7, 1.0, 1.5, 2.0],
            autoplay: false,
            muted: false,
            loop: false,
            preload: 'auto',
            language: 'zh-CN',
            aspectRatio: '16:9',
            fluid: false,
            sources: [{
                src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
                type: 'video/mp4'
            }],
            poster: '',
            notSupportedMessage: '此视频暂无法播放，请稍后再试',
            controlBar: {
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                fullscreenToggle: true
            }
        }
    }
},

通过以上配置，你可以在Vue中播放视频并记录时间。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue使用vue-video-player保存视频播放记录](https://blog.csdn.net/shitianxiang/article/details/104195849)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]