如何用CSS、JS 实现这个动画？

JavaScript0136

如何用CSS、JS 实现这个动画？,第1张

首先设计一个窗口 给与一个class名 xxx

然后CSS给予display:none

然后建立一个button按钮 给予一个class名 sss

$('.sss').click(function(){

$('xxx').toggle()

})

在安卓手机上，使用video播放视频有个问题，video控件层级会永远在顶层，不利于视频互动H5开发，而IOS手机上不会有此问题。

<video src="http://xxx.mp4" x5-video-player-type="h5"/>

x5-video-player-type="h5"   只适用于微信浏览器

注意:

1.jsmpeg 需要将视频转为.ts的文件

     先安装ffmpeg,然后执行以下命令,将mp4格式的文件转成 .ts(用命令行转的才能正常播放)

ffmpeg -i video.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 out.ts(文件的路径不太好找,建议全局搜索一下)

2.安卓上使用jsmpeg插件渲染canvas，ios上正常使用video并加入隐藏控制条等设置

3. http://hf-app.oss-cn-hangzhou.aliyuncs.com/public/html/jsmpeg.js    请使用此js,原作者的js没有回调设置

4. https://github.com/phoboslab/jsmpeg   原作者github地址

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JSMpegPlayer</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">

    <style>

    html,body{

        padding: 0

        margin: 0

    }

    .msg-wrap{

        position: fixed

        top: 0

        left: 0

        background: #fff

        border: 1px solid #000

    }

    .video-wrap{

        width: 100%

        display: none

    }

    </style>

</head>

<body>

    <video class="video-wrap" id="video-ios" x5-playsinline webkit-playsinline playsinline src="1_BG_4s_2.mp4"></video>

    <canvas class="video-wrap" id="video-android"></canvas>

    <div class="msg-wrap" id="msgTxt">loading...</div>

    <script src="http://hf-app.oss-cn-hangzhou.aliyuncs.com/public/html/jsmpeg.js"></script>

    <script>

        var msgTxt = document.getElementById('msgTxt')

        var video = document.getElementById('video-ios')

        var canvas = document.getElementById('video-android')

        //检测是否为非安卓浏览器并作处理

        var check = !! navigator.userAgent.match(/\(i[^]+( U)? CPU.+Mac OS X/)

        if(check){

            msgTxt.innerHTML = "not Android mode"

            video.style.display="block"

            video.play()

            //监听video加载完成

            video.addEventListener("loadedmetadata",function(){

                msgTxt.innerHTML = "not Android mode:videoPlaying"

            })

            //监听video播放结束

            video.addEventListener("ended",function(){

                msgTxt.innerHTML = "not Android mode:videoEnd"

            })

        }else{

            // jsmpegPlay(canvas,'1_BG_4s_5.ts',startCallBack,playingCallBack,endCallBack)

            jsmpegPlay(canvas,'out.ts',startCallBack,playingCallBack,endCallBack)

        }

        function jsmpegPlay(Vcanvas,vVideo,startFun,playingFun,endFun) {

            var player = new JSMpeg.Player(

                vVideo ,{

                    canvas: Vcanvas,

                    loop: false,

                    autoplay: true,

                    startSign: true,

                    startCallBack: startFun,

                    playingCallBack: playingFun,

                    endCallBack: endFun

                })

        }

        //视频开始播放（即解码完成）执行

        function startCallBack() {

            msgTxt.innerHTML = "Android mode:videoPlaying"

            canvas.style.display="block"

        }

        //视频播放进度

        function playingCallBack(currentTime) {

            // console.log(currentTime)

        }

        //视频播放完成执行

        function endCallBack() {

            msgTxt.innerHTML = "Android mode:videoEnd"

        }

    </script>

</body>

</html>

项目中遇到的坑,把使用方法记录一下

在线演示DOMO

JSMpegPlayer

https://github.com/xxfxx/android-video-autuplay   github地址,欢迎小星星~~~