Vollbildvideo -Tutorial

In diesem Dokument werden Vollbild -Video -Techniken beschrieben, die in JQuery UI -Dialog Windows integriert sind. Die Beispiele verwenden eingebettete YouTube -Videos, die Methoden gelten jedoch für jeden Videotyp.

Browser -Vollbild -Fähigkeitsprüfung

Videos in jQuery UI -Dialoge

einbetten

einzelnes Video Vollbildmaterial

Mehrere Videos Vollbild (Miniaturansicht)

Erweitert: Ein Vollbildvideo, ein draggierbar

Code -Beispiel

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

(Hinweis: Der FAQS -Abschnitt aus der ursprünglichen Eingabe wurde weggelassen, da er weitgehend nicht mit dem bereitgestellten Code und den Screenshots zu tun hatte und Informationen enthielt

Das obige ist der detaillierte Inhalt vonVollbildvideo -Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!