HTML5 video background on iPad/iphone

后端 未结 8 668
故里飘歌
故里飘歌 2021-01-30 18:36

I used this solution to use an html5 video as the background of my site.

However, it doesn\'t seem to work on iPad/iphone, all I am getting is a black screen, and the vi

8条回答
  •  星月不相逢
    2021-01-30 18:43

    In http://www.develooping.com/canvas-video-player/ you can see a responsive mp4 background working in iPad/iPhones. Download the code from http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip. It uses an adapted version of HTML canvas video player script by Stanko;

    Look at me

    The script is used as follows

    
    
    

    The CSS is

    body {
    background: #000;
    padding:0;
    margin:0;
    }
    .video-responsive {
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
    }
    
    .canvas,
    .video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: #000;
    z-index: 5;
    }
    #over_video{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    z-index: 10;
    font-size: 12vw;
    color: #FFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-top: 20%;
    text-shadow: 4px 4px 4px #5C433B;
    }
    

    Hope it can help.

提交回复
热议问题