Skip to Content
This question has been flagged
2 Replies
356 Views
Avatar
Enrique Gonzalez Sancho

I am trying to show a preview of an uploaded video (into an ir.attachment record) and optionally to be able to play it in its form view. I have found some references in the web about the widget "video_preview", which seems to not be loaded by default in Odoo, and all my efforts for adding it failed (my skills with Odoo + Javascript are really basic). Any help? Thanks a lot!

Avatar
Discard
Avatar
Cybrosys Techno Solutions Pvt.Ltd
Best Answer

Hi,

 

The saved video can be played in Odoo by creating a video preview widget. 

The following blog will help you to achieve this.

* https://www.cybrosys.com/blog/an-overview-of-video-preview-widget-in-odoo-16

Like this, we can create a widget to preview the video in Odoo 17.


Hope it helps.

Avatar
Discard
Avatar
namn44241
Best Answer

hi, you can using this js to embed a youtube video in odoo17:
```

/** @odoo-module **/


import { registry } from "@web/core/registry";

import { _t } from "@web/core/l10n/translation";

import { Component, onMounted, useRef, xml } from "@odoo/owl";


class VideoPlayer extends Component {

    static template = xml`

        <div class="o_video_container">

            <div t-ref="youtubePlayer" class="youtube-player"></div>

        </div>

    `;


    static props = {

        videoId: { type: String, optional: true },

    };


    setup() {

        this.youtubePlayerRef = useRef("youtubePlayer");

        this.player = null;

        onMounted(() => {

            this._loadYoutubeAPI().then(() => {

                this._setupYoutubePlayer();

            });

        });

    }


    _loadYoutubeAPI() {

        const youtubeUrl = 'https://www.youtube.com/iframe_api';

        return new Promise((resolve) => {

            if (document.querySelector(`script[src="${youtubeUrl}"]`)) {

                if (window.YT && window.YT.Player) {

                    resolve();

                } else {

                    window.onYouTubeIframeAPIReady = () => resolve();

                }

                return;

            }

            const script = document.createElement('script');

            script.src = youtubeUrl;

            script.async = true;

            window.onYouTubeIframeAPIReady = () => resolve();

            document.head.appendChild(script);

        });

    }


    _setupYoutubePlayer() {

        if (!this.youtubePlayerRef.el) return;

        this.player = new YT.Player(this.youtubePlayerRef.el, {

            videoId: this.props.videoId,

            playerVars: {

                'autoplay': 0,

                'origin': window.location.origin,

                'rel': 0

            },

            events: {

                'onStateChange': this._onPlayerStateChange.bind(this)

            }

        });

    }


    _onPlayerStateChange(event) {

    }

}


registry.category("public_components").add("videoPlayer", VideoPlayer);


export default VideoPlayer;
```

after that, you can using this js via widget="html"

Avatar
Discard