Written in the book of the former

This time to share using Canvas to play video and add the function of bullet screen.

Welcome to pay attention to my blog, irregularly updated —

rendering

See sample source code:The source address

You can see that the top is a video, and the bottom is a video redrawn with canvas, and supports dynamic adding of bullets.

Canvas loading video

The data source required by the drawImage method in canvas to draw pictures is not only a certain picture, but also a certain frame of the video. Something like this:

var video = document.getElementById('video') var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var ctx.drawImage(video, 0, 0, width, height); // This method is triggered when the video starts playing to start drawing the videoCopy the code

Why draw video on canvas?

Canvas provides a getImageData && putImageData method that allows operators to dynamically change the display state of each frame if you know how it should be changed 🙂

For example, as mentioned in MDN, you can change the color of the yellow background in the video above: THE MDN example address

this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getImageData(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putimageData (frame, 0, 0);Copy the code

The screenshot of the video is as follows:



For more information about canvas image manipulation, please refer to the following two articles:

  • Canvas based wave drawing picture
  • Canvas based implementation of a small screenshot demo

Canvas based image processing can achieve very powerful functions, such as filter ah ~

Alloyimage-a professional image processing library based on HTML5 technology produced by Tencent’s Aolly Team is a good example. The author doesn’t understand all that fancy stuff, Laplacian operators, operators 🙂

Barrage function

The function of barrage is divided into two parts:

  • Listen for new barrage push
  • Render bullets to the page

Listen for new barrage push

Maintain a barrage array to render the location of each barrage note in real time. When to update the array, decoupled authors use a publish-subscribe mode to update the array. Of course, it is not necessary to use this pattern, but the author just learned it and used it. Don’t spray me 🙂

var Event = (function(){ var list = {}, listen, trigger, remove; Listen = function(key,fn){if(! list[key]) { list[key] = []; } list[key].push(fn); }; Trigger = function () {/ trigger executed in sequence after the callback var key = Array. The prototype. The shift. The call (the arguments), FNS = list [key]; if(! fns || fns.length === 0) { return false; } for(var i = 0, fn; fn = fns[i++];) { fn.apply(this,arguments); }}; remove = function(key,fn){ var fns = list[key]; if(! fns) { return false; } if(! fn) { fns && (fns.length = 0); }else { for(var i = fns.length - 1; i >= 0; i--){ var _fn = fns[i]; if(_fn === fn) { fns.splice(i,1); }}}}; return { listen: listen, trigger: trigger, remove: remove } })(); Event.listen('data', $('#submit').click(function() {var data = $('input').val() event.trigger ('data', {value: $('#submit').click(function() {var data = $('input').val() event.trigger ('data', {value: data, }) }) function addNewWord (data) { var newWord = new Barrage(this.canvas, this.ctx, Data) // Build a new barrage instance wordobj.push (newWord)},Copy the code

Render bullets to the page

Declare a barrage constructor that contains its properties and add the draw method to the prototype chain to draw:

function Barrage(canvas, ctx, data) { this.width = canvas.width this.height = canvas.height this.ctx = ctx this.color = data.color || '#'+ math.floor (math.random ()*16777215).toString(16) // Random color this.value = data.value this.x = this.width //x coordinate this.y = Math.random() * this.height this.speed = math.random () + 0.5 this.fontsize = math.random () * 10 + 12} Barrage.prototype.draw = function() { if(this.x < -200) { return } else { this.ctx.font = this.fontSize + 'px "microsoft  yahei", sans-serif'; this.ctx.fillStyle = this.color this.x = this.x - this.speed this.ctx.fillText(this.value, this.x, this.y) } }Copy the code

The last

The blog of Po author is updated from time to time – if you have any questions, please feel free to share them under issues.