vue 图片剪辑_具有vue的媒体多剪辑工具

最新推荐文章于 2024-08-09 07:00:31 发布

cuk5239

最新推荐文章于 2024-08-09 07:00:31 发布

阅读量459

点赞数

文章标签： vue go app ffmpeg webrtc ViewUI

原文链接：https://vuejsexamples.com/a-media-multi-cut-tool-with-vue/

版权

这是一个基于Vue的媒体剪辑工具，提供图片剪辑功能。包括项目设置如开发时的编译和热重载，生产环境的编译和最小化，以及文件的整理和修复。

摘要由CSDN通过智能技术生成

vue 图片剪辑

媒体切割工具 (media-cut-tool)

A media multi-cut tool.

媒体多剪辑工具。

<template>
    <div id="app">
        <video ref="video" src="https://pan.prprpr.me/?/dplayer/hikarunara.mp4" controls width="600px"></video>
        <CropTool :duration="duration"
                  :playing="playing"
                  :currentPlayingTime="currentTime"
                  @play="playVideo"
                  @pause="pauseVideo"
                  @stop="stopVideo"/>
    </div>
</template>

<script>
    import CropTool from './components/CropTool.vue'
    
    export default {
        name: 'app',
        components: {
            CropTool,
        },
        data () {
            return {
                duration: 0,
                playing: false,
                currentTime: 0
            }
        },
        mounted () {
            const videoElement = this.$refs.video
            videoElement.ondurationchange = () => {
                this.duration = videoElement.duration
            }
            videoElement.onplaying = () => {
                this.playing = true
            }
            videoElement.onpause = () => {
                this.playing = false
            }
            videoElement.ontimeupdate = () => {
                this.currentTime = videoElement.currentTime
            }
        },
        methods: {
            seekVideo (seekTime) {
                this.$refs.video.currentTime = seekTime
            },
            playVideo (time) {
                this.seekVideo(time)
                this.$refs.video.play()
            },
            pauseVideo () {
                this.$refs.video.pause()
            },
            stopVideo () {
                this.$refs.video.pause()
                this.$refs.video.currentTime = 0
            }
        },
    }
</script>