js一加载网页就自动播放

JavaScript030

js一加载网页就自动播放,第1张

js一加载网页就自动播放是通过iframe的方式。通过iframe的方式加载带音视频的网页。此页面已经获取了使用音视频设备权限。就是此页面可以获得了使用麦克风和摄像头的权限就可以自动播放。

在安卓手机上，使用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地址,欢迎小星星~~~

ios中使用audio，日常踩坑

必须！！！点击后才调用xxx.play()这个方法

但是我们音频链接数据如果是网络请求而来的，那我们可以这样做：

1.在无播放链接的情况下先调用一次xxx.play()，然后暂停xxx.pause()

2.请求到数据以后，替换链接

3.判断readyState的值

0 = HAVE_NOTHING - 没有关于音频是否就绪的信息

1 = HAVE_METADATA - 关于音频就绪的元数据

2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒

3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的

4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

4.如果readyState===4，调用xxx.currentTime = 0 初始化

5.最后调用xxx.play()

感谢 https://blog.csdn.net/cmyh100/article/details/80695271

给我灵感

我的做法是： 在获取到音频链接前

先执行一次play 然后暂停，最后在获取到音频地址后 将音频时间设置为0 最后重新调用paly()