Question

我在vue.js中自动播放视频时遇到了问题。我的代码如下

<html>
<head>
    <link rel="stylesheet" href="{{asset("css/bootstrap.min.css")}}" type="text/css">
    <link rel="stylesheet" href="{!! asset("css/animate.css") !!}" type="text/css">

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        video {
            object-fit: fill;
        }
        [v-cloak]{
            display: none;
        }


    </style>
</head>
<body>
<div id="wrapper" v-cloak="">
    <div v-if="showImage">
        <div :class="currentAnimation">
            <img :src="currentImage" width="100%" height="100%">
        </div>
    </div>
    <div v-if="showVideo">
        <div :class="currentAnimation">
        <video width="100%" height="100%"  autoplay muted loop id="videoID" >
             <source :src="currentVideo" type="video/mp4">
            </video>
        </div>
    </div>

 </div>

</body>
<script src="{!! asset("js/signage-public.js") !!}"></script>
<script>
    new Vue({
        el:"#wrapper",
        data:{
            message:"hi",
            contents:[{"ID_Funcion":1,"Nombre":"Video","Archivo":"15aeb0bd16203a.mp4","Duracion":5,"Orden":1,"ID_Pantalla":8},{"ID_Funcion":3,"Nombre":"Imagen","Archivo":"15aeb0c7f9c68e.jpeg","Duracion":5,"Orden":2,"ID_Pantalla":8},{"ID_Funcion":2,"Nombre":"Video","Archivo":"15aeb0c600b0f9.mp4","Duracion":5,"Orden":3,"ID_Pantalla":8}],,
            currentImage:null,
            showImage:false,
            currentVideo:null,
            showVideo:false,
            currentAnimation:null,
            animations:['bounce','pulse','rubberBand','tada'],
            content_length:null,
            videoId:null,
        },
        methods:{
            loadData:function (data) {
                var totalDuration=data.Duracion*1000;
                var self=this;

                switch (data.Nombre){
                    case 'Imagen':{
                        this.showVideo=false;
                        this.showImage=true;
                        this.currentImage='/image/content/'+data.Archivo

                        setTimeout(function(){
                            self.showNextData(data)
                        },totalDuration);
                        break;
                    }
                    case 'Video':{
                        this.showImage=false;
                        this.showVideo=true;
                        this.currentVideo='/image/content/'+data.Archivo;

                        if (this.videoId)
                        this.videoId.play();

                        setTimeout(function(){
                            self.showNextData(data)
                        },totalDuration);
                        break;
                    }
                    default:break;
                }
            },
            showNextData:function(data){
                var contentIndex=0;
                for (var i=0;i<this.contents.length;i++){
                    if (data.ID_Funcion===this.contents[i].ID_Funcion){
                        contentIndex=i;
                        break;
                    }
                }
                if (contentIndex==this.content_length-1){
                    console.log('It should be called');
                    // location.reload();
                }else {
                    contentIndex=contentIndex+1;
                    this.loadData(this.contents[contentIndex])
                }

            }
        },

        mounted:function () {

            this.content_length=this.contents.length;
            this.videoId=document.getElementById("videoID");

            this.loadData(this.contents[0]);
        }
    })
</script>
</html>

内容中有三个要素。两个是视频，一个是图像。显示它们的顺序是首先显示一个视频，然后显示图像并再次显示视频。我需要将视频自动播放。首先，当视频显示时，视频会自动播放，但在第二部分显示后是图像，然后在第三部分显示视频，视频显示在浏览器上，但不会自动播放。

Jsfiddle demo
https://jsfiddle.net/ashokap/cq8qcgj2/
任何人都可以帮我解决这个问题。任何帮助都将被批准

vue.js和html5视频没有自动播放

0 个答案: