Anzeige

HMTL5 Video-Element manipulieren

HMTL5 Video-Element manipulieren | PSD-Tutorials.de

Erstellt von johnreinert, 09.01.2013.

  1. johnreinert

    johnreinert Nicht mehr ganz neu hier

    Dabei seit:
    10.12.2007
    Beiträge:
    176
    Geschlecht:
    männlich
    HMTL5 Video-Element manipulieren
    Ich habe auf meiner HP das Video-Element mittels dem opacity-Element manipuliert so das es erst zu 100% sichtbar wird wenn die Maus dieses Element berührt. Nur habe ich da das Problem das wenn die Maus das Element verlässt, es wieder durchsichtig wird... das ist eigentlich so gewohlt, nur geschieht es auch wenn das Video abgespielt wird.

    Wie kann ich das so manipulieren das es beim Abspielen des Videos den Hover-Status annimmt, also zu 100% sichtbar wird?
     
    #1      
  2. Panzerkrokette

    Panzerkrokette Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2009
    Beiträge:
    67
    Geschlecht:
    männlich
    Software:
    Photoshop CS6, After Effects CS6, Dreamweaver CS6, Fireworks CS6, Premiere Pro CS6
    HMTL5 Video-Element manipulieren
    AW: HMTL5 Video-Element manipulieren

    Hi,
    das wird so nicht funktionieren. Du manipulierst ja den Container / Viewer / Player Background - NICHT das eigentliche Video. MP4 und OGG kann keine Transparenzen darstellen - bzw. nur mit einem Trick: http://bit.ly/dehvMd
    Sobald also das Video läuft ist Opacity des Bereichs durch das Videoelement wieder 100%.
    Besser also ein Freeze Frame des Videos als jpg Thumbnail per MouseOver manipulieren, dann per Klick das Video starten (vllt in einer Shadowbox?).
    Cheers
    PK
     
    #2      
  3. mindraper

    mindraper me[code].Java(Script)

    Dabei seit:
    12.08.2007
    Beiträge:
    213
    Geschlecht:
    männlich
    Ort:
    Zuhause
    Software:
    Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil
    HMTL5 Video-Element manipulieren
    AW: HMTL5 Video-Element manipulieren

    hi,

    kannst du bitte (zumindest ausschnittweise) dein markup + deine stylesheets posten? für den effekt, den du erreichen möchtest, musst du deinem <video>-element bzw. besser einem umliegenden <div>-container eine zweite klasse verpassen, sobald das video abgespielt wird. eine reine css basierte lösung kann ich mir auf die schnelle nicht vorstellen, da wirst du wohl javascript brauchen.

    beispielsweise so was:

    JavaScript
    PHP:
    1.  
    2. (function (window) {
    3.  
    4.     /** GLOBAL HELPERS
    5.      *  ----------
    6.      */
    7.  
    8.     /** used to delete circular references which lead to memory leaks
    9.      *  ----------
    10.      *  @param references {Objects}: one or more references to nullify
    11.      */
    12.     var free = function (references) {
    13.         var i = 0,
    14.             l;
    15.  
    16.         for (l = arguments.length; i < l; i += 1) {
    17.             arguments[i] = null;
    18.         }
    19.     };
    20.  
    21.     /** checks if the given node owns the given class
    22.      *  ----------
    23.      *  @param node {DOMNode}: the node to check
    24.      *  @param clnm {String}: the class to be checked
    25.      *  @returns {Boolean}: true if the given node owns the class, otherwise false
    26.      */
    27.     var hasClass = function (node, clnm) {
    28.         var regex = new RegExp('\\s+?' + clnm + '\\b');
    29.         return regex.test(node.className);
    30.     };
    31.  
    32.     /** adds the given class to the given node if the node does not own the class,
    33.      *      otherwise it removes the given class
    34.      *  ----------
    35.      *  @param node {DOMNode}: the node
    36.      *  @param clnm {String}: the class to add/remove
    37.      *  @returns {Boolean}: always true
    38.      */
    39.     var handleClass = function (node, clnm) {
    40.         var regex,
    41.             clnms;
    42.  
    43.         if (hasClass(node, clnm)) {
    44.             regex = new RegExp('\\s+?' + clnm + '\\b', 'g');
    45.             node.className = node.className.replace(regex, '');
    46.  
    47.             free(regex);
    48.             return true;
    49.         }
    50.  
    51.         regex = /\s+/;
    52.         clnms = node.className.split(regex);
    53.         clnms[clnms.length] = clnm;
    54.         node.className = clnms.join(' ');
    55.  
    56.         free(regex, clnms);
    57.         return true;
    58.     };
    59.  
    60.     /** binds ('hitches') a function to be executed in the given context, e. g.: sets
    61.      *      the this keyword to refer to the given context
    62.      *  ----------
    63.      *  @param handler {Function}: function to hitch
    64.      *  @param context {Object}: the new scope for handler
    65.      *  @returns {Function}: a new function with bound ('hitched') scope
    66.      */
    67.     var hitch = function (handler, context) {
    68.         return function () {
    69.             var args = Array.prototype.slice.call(arguments);
    70.             handler.apply(context, args);
    71.         };
    72.     };
    73.  
    74.     /** same as hitch, but designed for usage with eventListeners
    75.      *  ----------
    76.      *  @param handler {Function}: function to hitch
    77.      *  @param context {Object}: the new scope for handler
    78.      *  @returns {Function}: a new function with bound ('hitched') scope
    79.      */
    80.     hitch.event = function (handler, context) {
    81.         return function (event) {
    82.             var args = Array.prototype.slice.call(arguments, 1);
    83.             args.unshift(fixEvents(event, context));
    84.             handler.apply(context, args);
    85.         };
    86.     };
    87.  
    88.     /** wipes out some differences between Microsofts implementation of the event object
    89.      *      and the standard (W3C) event object
    90.      *  ----------
    91.      *  @param event {Event Object}: generic event object
    92.      *  @param context {Object}: context to be set as event.target
    93.      *  @returns {Event Object}: a somewhat 'unified' generic event object
    94.      */
    95.     var fixEvents = function (event, context) {
    96.         var e = event || window.event;
    97.         if (typeof e.target === 'undefined') {
    98.             e.target = e.srcElement || context;
    99.         }
    100.  
    101.         if (typeof e.preventDefault === 'undefined') {
    102.             e.preventDefault = function () {e.returnValue = false;};
    103.         }
    104.  
    105.         if (typeof e.stopPropagation === 'undefined') {
    106.             e.stopPropagation = function () {e.cancelBubble = true;};
    107.         }
    108.  
    109.         return e;
    110.     };
    111.  
    112.     /** adds eventListeners to the given node. the given handler will be executed in the scope
    113.      *      of context or, if context is omitted, in the scope of the given node
    114.      *  ----------
    115.      *  @param node {DOMNode}: the node to add the listener to
    116.      *  @param type {String}: the type of event to listen to (e. g.: 'click')
    117.      *  @param handler {Function}: function to executed if the given eventtype occurs
    118.      *  @param context {Object}: the context (scope) for the handler
    119.      *  @param propagate {Boolean}: true the event should propagate (rarely needed)
    120.      *  @returns {Boolean}: true on success, false if no listener has been added
    121.      */
    122.     var addListener = function (node, type, handler, context, propagate) {
    123.         var bound = hitch.event(handler, (context || node));
    124.  
    125.         if (typeof node.addEventListener === 'function') {
    126.             node.addEventListener(type, bound, (propagate || false));
    127.  
    128.             free(bound);
    129.             return true;
    130.         } else if (typeof node.attachEvent === 'function') {
    131.             node.attachEvent('on' + type, bound);
    132.  
    133.             free(bound);
    134.             return true;
    135.         }
    136.  
    137.         return false;
    138.     };
    139.  
    140.     /** PLUGIN
    141.      *  ----------
    142.      */
    143.  
    144.     /** plugin constructor function, awaits a nodelist/array/nodecollection as argument
    145.      *  ----------
    146.      *  @param nodelist {DOMCollection|Array}: a collection or array of all <video>-elements
    147.      *  @returns {Object}: the new created Videofader instance
    148.      */
    149.     var Videofader = function (nodeList) {
    150.         var videoNodes = [],
    151.             node,
    152.             i = 0;
    153.  
    154.         if ((typeof nodeList !== 'object') &&
    155.             (typeof nodeList.length !== 'number') ||
    156.             (nodeList.length < 1)
    157.             ) {
    158.                 for (; node = nodeList[i]; i += 1) {
    159.                     if ((typeof node === 'object') &&
    160.                         (typeof node.nodeType === 'number') &&
    161.                         (typeof node.nodeName === 'string') &&
    162.                         (node.nodeName.toLowerCase() === 'video')) {
    163.                             videoNodes[i] = node;
    164.                     }
    165.                 }
    166.         }
    167.  
    168.         this.nodes = videoNodes;
    169.         this.length = videoNodes.length;
    170.  
    171.         free(videoNodes, node);
    172.         return this.wrap();
    173.     };
    174.  
    175.     Videofader.prototype = {
    176.      constructor: Videofader
    177.     };
    178.  
    179.     /** wraps every given <video>-element into its very own <div>-container
    180.      *  ----------
    181.      *  @returns {Object}: same as constructor [[INTERNAL_USE]]
    182.      */
    183.     Videofader.prototype.wrap = function () {
    184.         var nodes = this.nodes.slice(),
    185.             sandbox,
    186.             node,
    187.             tmp,
    188.             i = 0;
    189.  
    190.         this.nodes = [];
    191.  
    192.         for (; node = nodes[i]; i += 1) {
    193.             tmp = node.*****Node(true);
    194.  
    195.             sandbox = document.createElement('div');
    196.             sandbox.appendChild(tmp);
    197.  
    198.             this.nodes[i] = sandbox;
    199.             node.parentNode.replaceChild(sandbox, node);
    200.         }
    201.  
    202.         free(nodes, sandbox, node, tmp);
    203.         return this;
    204.     };
    205.  
    206.     /** adds eventlisteners to the instances <div>-wrappers
    207.      *  ----------
    208.      *  @param type {String}: the type of event that should be listened to
    209.      *  @returns {Object}: same as constructor [[INTERNAL_USE]]
    210.      */
    211.     Videofader.prototype.listenTo = function (type) {
    212.         var node,
    213.             i = 0;
    214.  
    215.         for (; node = this.nodes[i]; i += 1) {
    216.             addListener(node, type, this.onEventHandle);
    217.         }
    218.  
    219.         free(node);
    220.         return this;
    221.     };
    222.  
    223.     Videofader.prototype.onEventHandle = function () {
    224.         handleClass(this, 'protects-opacity');
    225.     };
    226.  
    227.     window.Videofader = Videofader;
    228.  
    229. })(this);
    230.  
    benutzt wird das ganze so:
    PHP:
    1.  
    2. window.onload = function () {
    3.     /* get all <video>-elements */
    4.     var videoElems = document.getElementsByTagName('video');
    5.    
    6.     /* register the elements to a new Videofader */
    7.     var videoFader = new Videofader(videoElems);
    8.  
    9.     /* let the Videofader listen to click events */
    10.     videoFader.listenTo('click');
    11. };
    12.  
    falls du nur bei bestimmten videos das ein- und ausblenden abschalten möchtest, sobald der besucher sie angeklickt hat, solltest du diese elemente mit document.querySelectorAll(*CSS_SELECTOR_STRING*) auswählen.
    PHP:
    1.  
    2. window.onload = function () {
    3.     /* get all elements with class .videofader */
    4.     var videoElems = document.querySelectorAll('.videofader');
    5.    
    6.     /* register the elements to a new Videofader */
    7.     var videoFader = new Videofader(videoElems);
    8.  
    9.     /* let the Videofader listen to click events */
    10.     videoFader.listenTo('click');
    11. };
    12.  
    jQuery

    das Videofader plugin ist zu 100% kompatibel mit jQuery. allerdings ändert sich die benutzung leicht:
    PHP:
    1.  
    2. /* shortform of $(document).ready(function () {}); */
    3. $(function () {
    4.     /* get all elements with class .videofader */
    5.     var videoElems = $('.videofader').toArray();
    6.    
    7.     /* register the elements to a new Videofader and
    8.      *     let the Videofader listen to click events
    9.      */
    10.     var videoFader = new Videofader(videoElems);
    11.     videoFader.listenTo('click');
    12. });
    13.  
    CSS
    du musst deine stylesheets noch um folgende klasse erweitern, damit das plugin funktionieren kann (bzw. damit du die transparenz "fixieren" kannst, solange das video läuft:

    Code (Text):
    1.  
    2. .protects-opacity {
    3.     opacity: 1 !important;
    4.     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important;
    5. }
    6.  
    hoffe das hilft!
     
    Zuletzt bearbeitet: 12.01.2013
    #3      
x
×
×