フルスクリーンビデオチュートリアル

このドキュメントは、jQuery UIダイアログウィンドウと統合されたフルスクリーンビデオテクニックを詳しく説明しています。 例では、組み込みYouTubeビデオを使用していますが、メソッドは任意のビデオタイプに適用されます。

ブラウザフルスクリーン機能チェック

jquery uiダイアログ

にビデオを埋め込みます

シングルビデオフルスクリーン

複数の動画フルスクリーン（サムネイルビュー）

Advanced：1つのフルスクリーンビデオ、1つのドラッグ可能

コード例

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

（注：元の入力のFAQセクションは、提供されたコードとスクリーンショットとほとんど関係がなく、簡単なWeb検索で入手できる情報が含まれていたため、省略されました。

以上がフルスクリーンビデオチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。