Basic example setup

Video Player is loading.
Advertisement
Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time -:-
1x
  • Chapters
  • descriptions off, selected
  • captions off, selected
    x
    ZOOM HELP
    Drag zoomed area using your mouse.
    100%

    Basic Code Setup

    <!--Load player skin, videojs and nuevo plugin inside <body> tag -->
    <link href="../skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
    <script src="../video.min.js"></script>
    <script src="../nuevo.min.js"></script>
    
    <!--Video tag setup-->
    <video id="player_one" class="video-js vjs-fluid" controls preload playsinline poster="../examples/assets/images/poster.jpg">
    	<source src="//opencdn.b-cdn.net/video/demo_720.mp4" type="video/mp4">
    	<source src="//opencdn.b-cdn.net/video/demo_720.webm" type="video/webm">
    </video>
    
    <!--Initialize the player and plugin-->
    <script>
    	var player = videojs('player_one');
    	player.nuevo({ 
    		//option_name: option_value, option_name: value
    	}); 
    </script>
    
    IMPORTANT: It is crucial to load CSS skin file and then player JS files from the <body> section of website, not <head>.

    You may also define nuevo plugin options in separate array:
    <script>
        var nuevo_options = { option1: value1, option2: value2 };
    	var player = videojs('player_one)';
    	player.nuevo(nuevo_options);
    </script>