27 简易视频播放器

最新推荐文章于 2021-08-25 16:03:38 发布

学习总不晚

最新推荐文章于 2021-08-25 16:03:38 发布

阅读量523

点赞数

分类专栏： Vue 文章标签： Vue中 video视频播放

本文链接：https://blog.csdn.net/u013472738/article/details/100435384

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

划重点

本案例是在上一个案例的基础上直接调试使用的 - 所以复习了组件的使用
video 标签的使用
在网页中操作视频：
- 播放、
- 暂停、
- 快进、

清蒸鲤鱼

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.6.10.js"></script>
</head>

<body>
    <div id="app">
        
    <video id="myvideo" style="width: 90%;height: 80%;">
    <source  src="./lib/testmp4.mp4">
    </video>
   <hr>
    <input type="button" @click="start" value="播放">
    <button @click="stop">暂停</button>
    <button @click="palybackRate">⏩x2(跳转播放并快进)</button>
        <!-- 
           使用私有子组件
         -->
        <comname1 v-on:usercomm4="vuemethods"></comname1>

        <!-- 
//参数说明： 
// vuemethods:是Vue中的函数 ，可以被子组件调用；并且子组件可以给其参数
// usercomm4：是自定义的一个 Vue中方法vuemethods方法的映射或者说是用在子组件中的vuemethods方法的别名。
由于在子组件中不能直接使用Vue中的函数 vuementhods 函数；所以这里重新绑定了一个子组件的定义的名称：usercomm4
         -->
    </div>

    <template id="divtem3">
        <div>
            <h3>{{ temmsg }}</h3>
            <a href="" @click.prevent="click1">点击后；子组件给Vue中的函数传值</a>
        </div>
    </template>


    <script>
        //组件的定义--------
        var temname1 = {
            template: '#divtem3',
            props: ['usercomm4'],//props里面是一个数组；
            data: function () {
                return {
                    temmsg: '23456'
                }

            },
            methods: {
                click1() {
                    //emit:发出；发射；触发的意思 ；；；； 
                    this.$emit('usercomm4', "我是参数1" + this.temmsg, "我是参数2")

                }
            }


        }
        // Vue的定义-------
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {//定义 Vue中的使用的方法
                vuemethods(canshu1, canshu2) {
                    alert("子组件传递过来的参数：" + canshu1 + canshu2)
                },
                start:function(){
                    document.getElementById("myvideo").play()  
              
                },
                stop:function(){
                    document.getElementById("myvideo").pause()
                },
                palybackRate:function(){
                    document.getElementById("myvideo").currentTime = 20;
                    document.getElementById("myvideo").playbackRate = 2;
                }
            },
            components: {//定义私有组件
                comname1: temname1

            }

        })

    </script>

</body>


</html>