SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы

Список вопросов Печать

Как в mithril.js подключить видеоплеер video.js?


Метки: mithril.js video.js javascript 

Ссылки

Ответы

RemiZOffAlex  Создано: 2024-09-15 22:59:28.203512  Обновлено: 2024-09-15 22:59:28.203532
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
>`)
])
RemiZOffAlex  Создано: 2024-09-15 22:19:36.452173  Обновлено: 2024-09-15 22:19:36.452192
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;
        }
    }
};

Возможно будут интересны и другие вопросы