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;
			}());