Full Screen Video Tutorial

This document details fullscreen video techniques integrated with jQuery UI dialog windows. The examples use embedded YouTube videos, but the methods apply to any video type.

Browser Fullscreen Capability Check

Embedding Videos in jQuery UI Dialogs

Single Video Fullscreen

Multiple Videos Fullscreen (Thumbnail View)

Advanced: One Fullscreen Video, One Draggable

Code Example

<code class="language-javascript">/**
 * jQuery Fullscreen Video Testing
 *
 * Facilitates fullscreen video and tests jQuery UI dialogs with one draggable video over another.
 *
 * @copyright Copyright (c) 2013 jQuery4u
 * @license http://jquery4u.com/license/
 * @link http://jquery4u.com
 * @since Version 1.0
 * @author Sam Deering
 * @filesource jquery4u-fsvid.js
 */

(function($,W,D,undefined){

    W.FSVID = W.FSVID || {};

    W.FSVID = {
        name: "FULLSCREEN VIDEO",

        init: function(settings){
            this.settings = $.extend({}, this.settings, settings);
            this.checkFullscreenPossible();
            this.setupEventHandlers();
        },

        checkFullscreenPossible: function(){
            var $fsStatus = $('#fsStatus');
            if (W.fullScreenApi.supportsFullScreen){
                $fsStatus.html('YES: Fullscreen supported!').addClass('fullScreenSupported');
            } else {
                $fsStatus.html('SORRY: Fullscreen not supported!').addClass('fullScreenNotSupported');
            }
        },

        setupEventHandlers: function(){
            var _this = W.FSVID;
            $('#createWidgets').on('click', function(e){
                e.preventDefault();
                _this.createWidgets();
            });

            // Prevent browser security issues
            var fsElement1 = document.getElementById('1');
            $("#gofs1").on('click', function(){
                window.fullScreenApi.requestFullScreen(fsElement1);
            });

            var fsElement2 = document.getElementById('2');
            $("#gofs2").on('click', function(){
                window.fullScreenApi.requestFullScreen(fsElement2);
            });

            var fsContainer = document.getElementById('vidcontainer');
            $("#gofsall").on('click', function(){
                W.fullScreenApi.requestFullScreen(fsContainer);
            });

            $("#gofsallwidgets").on('click', function(){
                $('#w_1, #w_2').detach().prependTo('#vidcontainer');
                W.fullScreenApi.requestFullScreen(fsContainer);
            });

            $("#gofssmart").on('click', function(){
                $('#w_1, #w_2').detach().prependTo('#vidcontainer');
                $('#w_1').css({"height": "100%", "width": "100%", "z-index": "1001", "left": "0", "top" : "0"});
                $('#w_2').css({"height": "360px", "width": "480px", "z-index": "1002", "left": "2%", "top" : "62%"});
                W.fullScreenApi.requestFullScreen(fsContainer);
            });

            $(W).on(W.fullScreenApi.fullScreenEventName, function(){
                if (W.fullScreenApi.isFullScreen()){
                    $('.f-btns').hide();
                } else {
                    $('.f-btns').show();
                }
            });
        },

        createWidget: function(wid){
            var $vid = $('.video#'+wid);
            $vid.dialog({
                title: $vid.find('.title'),
                width: "480",
                height: "360",
                position: [($('.ui-widget').length*500)+20, 290],
                resizable: true,
                draggable: true
            }).css({"width": "100%", "height": "100%"});
            $vid.parent('.ui-widget').attr('id', 'w_'+wid).css({"width": "480px", "height": "360px"});

            var fsButton = document.getElementById('gofs'+wid),
                fsElement = document.getElementById('w_'+wid);

            $(fsButton).off('click');
            $(fsElement).off(W.fullScreenApi.fullScreenEventName);

            $(fsButton).on('click', function(){
                W.fullScreenApi.requestFullScreen(fsElement);
            });
        },

        createWidgets: function(){
            $('.video').each(function (i,v){
                W.FSVID.createWidget($(v).attr('id'));
            });
        }
    };

    $(D).ready(function(){
        W.FSVID.init();
    });

})(jQuery,window,document);


/* Native FullScreen JavaScript API */

(function() {
    var fullScreenApi = {
            supportsFullScreen: false,
            isFullScreen: function() { return false; },
            requestFullScreen: function() {},
            cancelFullScreen: function() {},
            fullScreenEventName: '',
            prefix: ''
        },
        browserPrefixes = 'webkit moz o ms khtml'.split(' ');

    if (typeof document.cancelFullScreen != 'undefined') {
        fullScreenApi.supportsFullScreen = true;
    } else {
        for (var i = 0, il = browserPrefixes.length; i < il; i++) {
            fullScreenApi.prefix = browserPrefixes[i];
            if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                fullScreenApi.supportsFullScreen = true;
                break;
            }
        }
    }

    if (fullScreenApi.supportsFullScreen) {
        fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
        fullScreenApi.isFullScreen = function() {
            switch (this.prefix) {
                case '':
                    return document.fullScreen;
                case 'webkit':
                    return document.webkitIsFullScreen;
                default:
                    return document[this.prefix + 'FullScreen'];
            }
        };
        fullScreenApi.requestFullScreen = function(el) {
            return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
        };
        fullScreenApi.cancelFullScreen = function(el) {
            return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
        };
    }

    if (typeof jQuery != 'undefined') {
        jQuery.fn.requestFullScreen = function() {
            return this.each(function() {
                var el = jQuery(this);
                if (fullScreenApi.supportsFullScreen) {
                    fullScreenApi.requestFullScreen(el);
                }
            });
        };
    }

    window.fullScreenApi = fullScreenApi;
})();</code>

(Note: The FAQs section from the original input was omitted because it was largely unrelated to the provided code and screenshots, and contained information readily available through a simple web search.)

The above is the detailed content of Full Screen Video Tutorial. For more information, please follow other related articles on the PHP Chinese website!