m('video', { 'id': 'my-video', 'class': 'video-js', 'controls': true, 'preload': 'auto', 'width': '640', 'height': '264', 'poster': 'poster.jpg', 'data-setup': '{}', }, [ m('source', [{ src: 'video.mp4', 'type': 'video/mp4'}]), m('p', { class: 'vjs-no-js' }, `To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank" >supports HTML5 video</a >`) ])
|
function VideoPlayer() { let internal = { uuid: get_id(), player: null } let external = { } return { oncreate: function(vnode) { console.log('VideoPlayer.oncreate'); let vCode = document.getElementById(`videoPlayer_${internal.uuid}`); internal.player = videojs(vCode, external, () => { internal.player.log('onPlayerReady', this); }); }, onbeforeremove: function(vnode) { console.log('VideoPlayer.onbeforeremove'); //internal.player.dispose(); }, onbeforeupdate: function (vnode, old) { console.log('VideoPlayer.onbeforeupdate'); for (let key in vnode.attrs) { if (key=='sources') { if (external[key] != vnode.attrs[key]) { external[key] = vnode.attrs[key]; internal.player.src(external['sources']); } } else { external[key] = vnode.attrs[key]; } } if (internal.player) { } }, oninit: function (vnode) { console.log('VideoPlayer.oninit'); }, onremove: function (vnode) { console.log('VideoPlayer.onremove'); }, onupdate: function (vnode) { console.log('VideoPlayer.onupdate'); if (internal.player) { //for (let key in vnode.attrs) { //external[key] = vnode.attrs[key]; //if (key=='sources') { // internal.player.src(external['sources']); //} //}; } }, oninit: function (vnode) { console.log('VideoPlayer.oninit'); for (let key in vnode.attrs) { external[key] = vnode.attrs[key]; }; }, view: function (vnode) { console.log('VideoPlayer.view'); let result = []; result.push( m('video', { id: `videoPlayer_${internal.uuid}`, class: 'video-js'}), ) return result; } } };
|