长沙全速网络技术部组件实例

依赖jsmpeg.min.js
适用于腾讯域名以外的h5视频播放，腾讯h5视频播放参考
此方法在安卓下使用了ts播放器，需另外准备ts格式视频，可找后台开发转换格式。
由于在ios手机safari浏览器（微信手Q除外）中video无法自动播放，所以这里没有自动播放的设置，可自行按需解决。
            <div id="bgv"></div>
            <script>
            var videoPlayer = function (config) {
                return new (function (config) {
                    var s = $.extend({
                        id: null,
                        url: '',
                        autoplay: false,
                        loop: false,
                        onplay: function (t) { },
                        onend: function () { }
                    }, config),
                        a = this,
                        player = null,
                        played = false,
                        nu = navigator.userAgent,
                        isAndroid = nu.indexOf('Android') > -1 || nu.indexOf('Adr') > -1 || nu.match(/WeiBo/i) == 'weibo',
                        elm = document.createElement(isAndroid ? 'canvas' : 'video'),
                        init = function () {
                            if (isAndroid) {
                                player = new JSMpeg.Player(s.url.replace('.mp4', '.ts'), {
                                    canvas: elm,
                                    autoplay: false,
                                    loop: s.loop,
                                    onEnded: s.onend
                                });
                            } else {
                                elm.setAttribute('src', s.url);
                                elm.setAttribute('loop', s.loop);
                                elm.setAttribute('x5-video-player-type', 'h5');
                                elm.setAttribute('x5-video-player-fullscreen', 'true');
                                elm.setAttribute('x5-video-player-orientation', 'portraint');
                                elm.setAttribute('x-webkit-airplay', 'true');
                                elm.setAttribute('webkit-playsinline', '');
                                elm.setAttribute('x5-playsinline', '');
                                elm.setAttribute('playsinline', '');
                                player = elm;
                                player.load();
                                player.addEventListener('ended', s.onend);
                            }
                            setInterval(function () {
                                if (player.currentTime > 0 && !played) {
                                    if (!played) {
                                        document.getElementById(s.id).appendChild(elm);
                                        played = true;
                                    }
                                    s.onplay(player.currentTime);
                                }

                            }, 100);
                        };
                    a.play = function () {
                        player.play();
                    };
                    a.pause = function () {
                        player.pause();
                    };
                    a.time = function (t) {
                        if (t) {
                            player.currentTime = t;
                            a.play();
                        } else {
                            return player.currentTime;
                        }
                    };
                    init();
                })(config);
            };

            var player = videoPlayer({
                id: 'bgv',//容器id
                url: 'images/bgv.mp4',//视频地址
                loop: false,//是否循环播放
                onplay: function (t) {
                    //视频播放时 100毫秒执行一次 参数t为视频的当前播放时间
                    console.log(t);
                },
                onend: function () {
                    //视频播放完成回调
                }
            });
            //方法：
            //player.play() //播放
            //player.pause() //暂停
            //player.time(t) //参数t未填时，则获取视频当前时间，否则则设置视频到t时间播放
            </script>
H5视频播放
