Issue with videos

[peteringram0]

Hey,

Im adding a video to the DOM in the following way:

this.items = [h(`video#${item.id}`, {
                class: 'media-item',
                key: item.id,
                preload: 'auto'
            }, [
                h(`source`, {
                    src: item.src,
                    type: 'video/mp4'
                })
            ])];

var patches = diff(this.tree, h('div', this.items));
        this.rootNode = patch(this.rootNode, patches);
        this.tree = this.items;

I then want to start this video so i am doing a normal query selector then trying to run .play() on the element.

let el = document.getElementById(item.id)
el.play();

However the video does not play at all. Does anyone else have this issue with video?

Thanks,

[peteringram0]

Anyone know about this at all ? Thanks

[chinedufn]

Hey @peteringram0,

One way to approach this would be to use hooks. Here's a quick example:

var PlayHook = function (isPlaying) {
  this.isPlaying = isPlaying
}

PlayHook.prototype.hook = function (videoNode) {
  this.isPlaying ? videoNode.play() : videoNode.pause()
}

// ...

h('video', {
  src: src,
  playHook: new PlayHook(true),
})

// ...