Crear un reproductor básico con la interfaz de usuario Framework

Para crear un reproductor básico con el marco de IU:

  1. Cree un <div> para la instancia del reproductor.

    Por ejemplo:

    <div id="video1" > 
     </div>
    
  2. Cargue el reproductor.

    <script> 
        (function(){ 
            var player = ptp.videoPlayer('#video1'); 
        })(); 
    </script>
    

    Cuando se crea el reproductor, el elemento <div> especificado recibe una clase CSS de ptp-main-video-div-style. El DOM resultante se muestra de esta manera:

    <div id="video1" class="ptp-main-video-div-style"> 
        <video class="vp-video-element"></video> 
    </div>
    
  3. Agregue un control de interfaz de usuario.

    Por ejemplo, agregue una barra de control que aparezca cuando el ratón se sitúa sobre el reproductor:

    <script> 
        (function(){ 
            function myControlBarBehavior(element, configuration, player) { 
                return ptp.controlBarBehavior(element, configuration, player); 
            } 
            var player = ptp.videoPlayer('#video1', { 
                controlBar: { 
                    behavior: myControlBarBehavior, 
                    classNames: 'ptp-control-bar my_control_bar' 
                } 
            }); 
        })(); 
    </script>
    

    El DOM resultante aparece de la siguiente manera:

    <div id="video1" class="ptp-main-video-div-style"> 
        <div class="ptp-control-bar my_control_bar"></div> 
        <video class="vp-video-element"></video> 
    </div>
    

El objeto devuelto al llamar a ptp.videoPlayer() proporciona un comportamiento que ajusta la API del reproductor de medios TVSDK y permite el control programático de la reproducción. Cuando realiza llamadas en la instancia del reproductor de contenidos, la interfaz de usuario se actualiza a sí misma en función de los eventos activados por el reproductor de contenidos:

<script> 
    (function(){ 
        var player = ptp.videoPlayer('#video1'); 
        player.loadResource( 'sample.mp4' ); 
    })(); 
</script>

En esta página

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now