Last active
September 4, 2018 14:59
-
-
Save spodlecki/9807b6b395b09ac6a03291e0bc63ca3b to your computer and use it in GitHub Desktop.
Use-case for adding a `crossorigin` option to videojs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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"; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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