H5视频播放自动全屏，暂停退出全屏等功能

html5视频播放自动全屏，暂停退出全屏等功能

在参考了html5 video fullScreen全屏实现方式及司徒正美的书《javascript框架设计》287页相关代码后，在Safari上实现了视频播放自动全屏、暂停退出全屏等功能。代码是否兼容其他浏览器，未测。

http://www.cnblogs.com/phillyx/

var videoF = (function() {
                var tmpV = {};
                var video_playing;
                /**
                 * @description 切换内容列时暂停当前播放的视频
                 */
                function pausedVBeforeChangeLi() {
                    if (video_playing && !video_playing.ended && !video_playing.paused) {
                        video_playing.pause();
                    }
                };
                tmpV.pausedVBeforeChangeLi= pausedVBeforeChangeLi;
                /**
                 * @description 播放全屏 很诡异，这个方法居然不可用
                 * @param {Object} element
                 */
                function launchFullScreen(element) {
                    if (element.requestFullScreen) {
                        element.requestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    }
                };
                /**
                 * @description 取消全屏 这个方法也是不可用
                 * @param {Object} elem
                 */
                function cancelFullScrren(elem) {
                    elem = elem || document;
                    if (elem.cancelFullScrren) {
                        elem.cancelFullScrren();
                    } else if (elem.mozCancelFullScreen) {
                        elem.mozCancelFullScreen();
                    } else if (elem.webkitCancelFullScreen) {
                        console.log("webkitCancelFullScreen");
                        elem.webkitCancelFullScreen();
                    }
                };
                /**
                 * @return 返回支持的全屏函数 从网上找到了这段代码，具体网址忘记了，返回支持的全屏方法，在Safari上可用
                 * @param {Object} elem
                 */
                function fullscreen(elem) {
                    var prefix = 'webkit';
                    if (elem[prefix + 'EnterFullScreen']) {
                        return prefix + 'EnterFullScreen';
                    } else if (elem[prefix + 'RequestFullScreen']) {
                        return prefix + 'RequestFullScreen';
                    };
                    return false;
                };
                /**
                 * @description video相关事件的绑定
                 * @param {Object} v
                 */
                function videoEvent(v) {
                    var video = v,
                        doc = document;
                    video.addEventListener('play', function() {
                        //每次只能播放一个视频对象
                        if (video_playing && video_playing !== this) {
                            console.log('multi')
                            pausedVBeforeChangeLi();
                        }
                        video_playing = this;
                        console.log('play');
                        var fullscreenvideo = fullscreen(video);
                        video[fullscreenvideo]();
                    });
                    video.addEventListener('click', function() {
                        //点击时如果在播放，自动全屏；否则全屏并播放
                        console.log('click')
                        if (this.paused) {
                            console.log('paused');
                            this.play();
                        } else {
                            var fullscreenvideo = fullscreen(video);
                            video[fullscreenvideo]();
                        }
                    })
                    video.addEventListener('pause', function(e) {
                        this.webkitExitFullScreen();
                    });
                    video.addEventListener("webkitfullscreenchange", function(e) {
                        //TODO 未侦听到该事件
                        console.log(3);
                        if (!doc.webkitIsFullScreen) { //退出全屏暂停视频
                            video.pause();
                        };
                    }, false);
                    video.addEventListener("fullscreenchange ", function(e) {
                        console.log(31);
                        if (!doc.webkitIsFullScreen) { //退出全屏暂停视频
                            video.pause();
                        };
                    }, false);
                    video.addEventListener('ended', function() {
                        //播放完毕，退出全屏
                        console.log(4)
                        this.webkitExitFullScreen();
                    }, false);
                };
                tmpV.videoEvent = videoEvent;
                return tmpV;
            }());

转载于:https://www.cnblogs.com/phillyx/p/4719209.html