vimeo / player.js

Interact with and control an embedded Vimeo Player.
https://player.vimeo.com/api/demo
MIT License
1.44k stars 262 forks source link

Refernce Error on getQuality #1027

Open mallikarjunpatelsh opened 6 months ago

mallikarjunpatelsh commented 6 months ago

Expected Behavior

should get the qualities

Actual Behavior

ReferenceError is found

Steps to Reproduce

<!DOCTYPE html>
<html>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: #<BACKGROUND_COLOR>;
            overflow: hidden;
            position: fixed;
            position: relative;
        }

        .flexbox {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    </style>

    <head>
        <meta
                name="viewport"
                content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <script src="https://player.vimeo.com/api/player.js"></script>
    </head>

    <body>
        <div
                class="flexbox"
                mozallowfullscreen
                webkitallowfullscreen
                allowfullscreen>
            <div id="player"></div>
        </div>
    </body>

    <script type="text/javascript">
        var jsBridge = window.JsBridge;
        var player = null;

        function initVimeoPlayer(){
            var w = document.body.clientWidth;
            var h = document.body.clientHeight;

            var options = {
                url: '<VIDEO_URL>',
                autoplay: false,
    <!--            playsinline: false,-->
                quality_selector: true,
                controls: true,
                fullscreen: false,
                color: '<COLOR>',
                muted: <MUTED>,
                loop: <LOOP>,
                title: <TITLE>,
                vimeo_logo: false,
                quality: '<QUALITY>',
                portrait: true,
                byline: true,
                speed: true,
                transparent: true,
                width: w,
                height: h
            };
            player = new Vimeo.Player('player', options);

        player.on('timeupdate', function (data) {
            jsBridge.sendVideoCurrentTime(data.seconds)
        });

        player.on('play', function (data) {
            jsBridge.sendPlaying(data.duration)
        });

        player.on('pause', function (data) {
            jsBridge.sendPaused(data.seconds)
        });

        player.on('ended', function (data) {
            jsBridge.sendEnded(data.duration)
        });

        player.on('volumechange', function (data) {
            jsBridge.sendVolumeChange(data.volume)
        });

        player.on('texttrackchange', function (data) {
            jsBridge.sendTextTrackChange(data.kind,data.label,data.language)
        });

        player.on('error', function (data) {
            jsBridge.sendError(data.message,data.method,data.name)
        });

        player.ready().then(function () {
            player.getQuality().then(function(quality){
                jsBridge.sendQualities(quality)
                player.getDuration().then(function(duration) {
                    player.getVideoTitle().then(function(title) {
                        player.getTextTracks().then(function(tracks) {
                            var tracksJSON = JSON.stringify(tracks);
                            jsBridge.sendReady(title,duration,tracksJSON)
                        }).catch(function(error) {
                            jsBridge.sendInitFailed()
                            jsBridge.sendError('Init failed','init','init')
                        })
                    }).catch(function(error) {
                        jsBridge.sendInitFailed()
                        jsBridge.sendError('Init failed','init','init')
                    })
                }).catch(function(error) {
                    jsBridge.sendInitFailed()
                    jsBridge.sendError('Init failed','init','init')
                })
            }).catch(function(error) {
            jsBridge.sendInitFailed()
            jsBridge.sendError(error.name,'init','init')
        })
        }).catch(function(error) {
            jsBridge.sendInitFailed()
        });
    }

    function seekTo(startSeconds) {
        player.setCurrentTime(startSeconds)
    }

    function pauseVideo() {
        player.pause()
    }

    function playVideo() {
        player.play()
    }

    function loadVideo(videoId) {
        player.loadVideo(videoId).then(function(id) {
            player.getDuration().then(function(duration) {
                player.getVideoTitle().then(function(title) {
                    jsBridge.sendReady(title,duration)
                }).catch(function(error) {
                    jsBridge.sendInitFailed()
                    jsBridge.sendError('Init failed','init','init')
                })
            }).catch(function(error) {
                jsBridge.sendInitFailed()
                jsBridge.sendError('Init failed','init','init')
            })
        })
    }

    function setVolume(volumePercent) {
        player.setVolume(volumePercent)
    }

    function destroyPlayer() {
        player.destroy()
    }

    function setColor(hexColor) {
        player.setColor(hexColor)
    }

    function setLoop(loop) {
        player.setLoop(loop)
    }

    function setPlaybackRate(playbackRate) {
        player.setPlaybackRate(playbackRate)
    }

    function playTwoStage() {
        player.play().then(function() {
            player.pause().then(function() {
                player.play()
            }).catch(function(error) {
                jsBridge.sendError(data.message,data.method,data.name)
            })
        }).catch(function(error) {
            jsBridge.sendError(data.message,data.method,data.name)
        })
    }

    function setCaptions(language) {
        player.enableTextTrack(language).then(function(track) {
            track.language = language
            track.kind = 'captions'
        }).catch(function(error) {
            jsBridge.sendError(error.name,error.name,error.name)
        })
    }

    function getAllQualities() {
        player.getQuality().then(function(quality) {
                jsBridge.sendQualities('qualities')
                jsBridge.sendError('qualites error',error.name,error.name)
            }).catch(function(error) {
                jsBridge.sendError('qualites 1 error',error.name,error.name)
            })
        }

        function setQuality() {
                                        player.setVolume(1).then(function(volume) {
                                            jsBridge.sendError('qualites set error1',error.name,error.name)
                                        }).catch(function (error) {
                                            jsBridge.sendError(error.name,error.name,error.name)

                                        })
                                    }

    function disableCaptions() {
        player.disableTextTrack()
    }

    </script>

</html>

this is my html for embedding for android. What is the error. For play() and all function it is working but for getQuality() it is giving Refernce Error

bdougherty commented 5 months ago

Hmm, nothing immediately jumps out to me, other than you don't need to call player.ready(), but that shouldn't make a difference here. Are you able to reproduce the issue when running it in a browser directly?