Tutoriel vidéo plein écran

Ce document détaille les techniques vidéo complètes intégrées à la boîte de dialogue JQuery UI. Les exemples utilisent des vidéos YouTube intégrées, mais les méthodes s'appliquent à n'importe quel type de vidéo.

Vérification de la capacité pleine écran du navigateur

Entrer des vidéos dans les boîtes de dialogue jQuery UI

Video Single FullScreen

plusieurs vidéos en plein écran (vue de vignettes)

Advanced: une vidéo plein écran, une greffe

Exemple de code

<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>

(Remarque: La section FAQ de l'entrée d'origine a été omise car elle n'était largement pas liée au code fourni et aux captures d'écran, et contenait des informations facilement disponibles via une simple recherche Web.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!