Skip to content

Instantly share code, notes, and snippets.

@spodlecki
Last active September 4, 2018 14:59
Show Gist options
  • Save spodlecki/9807b6b395b09ac6a03291e0bc63ca3b to your computer and use it in GitHub Desktop.
Save spodlecki/9807b6b395b09ac6a03291e0bc63ca3b to your computer and use it in GitHub Desktop.
Use-case for adding a `crossorigin` option to videojs
.video-js [class^="icon-"] .vjs-icon-placeholder:before,
.video-js [class*=" icon-"] .vjs-icon-placeholder:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.video-js .icon-camera .vjs-icon-placeholder:before {
content: "\f030";
}
VideoSnapshot = (config)->
player = this
canvas = document.createElement('canvas');
ctx = canvas.getContext('2d')
generateSnapshot = ->
currentTime = player.currentTime()
canvas.width = player.videoWidth();
canvas.height = player.videoHeight();
ctx.drawImage(player.tech().el(), 0, 0, canvas.width, canvas.height)
image = canvas.toDataURL('image/jpeg')
player.trigger('onSnapshot', image)
player.poster(image)
player.pause(true)
player.currentTime(0)
# Display the poster again.
setTimeout(->
player.el().classList.remove('vjs-has-started')
, 400)
# Create a button and handle the click event
Button = videojs.getComponent('Button')
SnapshotButton = videojs.extend(Button,
constructor: ->
Button.apply(@, arguments)
# add font-awesome icon to bar (see scss file)
@addClass('icon-camera')
@controlText("Snapshot")
handleClick: ->
generateSnapshot()
)
videojs.registerComponent('SnapshotButton', SnapshotButton)
# Remove (css uses display: none) the poster image from the view
player.on('play', ->
player.el().classList.add('vjs-has-started')
)
# Helps with the seeking / hides a poster image when the user clicks around.
# If you load the video and press a seek, and the video has a poster set,
# the poster stays displayed until `play` event is triggered
player.on('seeked', ()->
player.el().classList.add('vjs-has-started')
)
# Add the button when the player is ready
player.one('ready', ->
player.getChild('controlBar').addChild('SnapshotButton', {}, -1)
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment