Capture Snapshot Image

Video Player is loading.
Advertisement
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
1x
  • Chapters
  • descriptions off, selected
  • captions off, selected
    x
    ZOOM HELP
    Drag zoomed area using your mouse.
    100%
    Optional "snapshot" button, which allows to capture image from video at current time position.

    Initialize snapshot button

    Initialize video.js and Nuevo plugin with Snapshot enabled
    
    <script>
    	var player = videojs('player_1');
    	player.nuevo({ 
    		snapshot:true
    	});
    </script>
    
    By default captured image is in .jpg format. You can also set an option to save image in .png format.
    <script>
    	var player = videojs('player_1');
    	player.nuevo({ 
    		snapshot:true, snapshotType: "png"
    	});
    </script>
    
    The plugin allows to overlay watermark on snapshot image. You need to define watermark text as plugin's option, e.g.
    <script>
    	var player = videojs('player_1');
    	player.nuevo({ 
    		snapshot:true, 
    		snapshotWatermark: "Domain.com" 
    	});
    </script>
    
    If streaming server is other than origin than production server, you need to enable CORS on streaming server or at least set video attribute crossorigin="anonymous".