How to control playback Resolution quality using vid.me?

[jasan-s]

No description provided.

[cookpete]

I'm not sure how we would change playback resolution on the fly once something has started played. The VidMe URLs are resolved to file URLs and played using FilePlayer, and when the src changes, it reloads the whole video.

What we can do is add a vidmeConfig prop object that takes a format string from one of the possible format types in the vidme data response:

"formats": [
    {
        "type": "480p",
        "uri": "https:\/\/d1wst0behutosd.cloudfront.net\/videos\/14832798\/47815650.mp4?Expires=1491998601&Signature=ZFJk4HPfuyYs6z2wz-jir4hJx4a4lq2bMCPvL64GRGhjoVhSZjbG3gEyAh~1sds6yNWIGmdEFTwTw3sP7e4-BOXqrH0bm~QGaObZMKgeAMih8K6trYNqSyrOkTy45Ao47zAgu2iViqIdjP6pzyURLMbEmInnPwAIgkP8SEY3JbsBxon0ofeSLBI-yM8cHSufZ8XpQiSOaU9iR1zTUHXH3SVbGbhyXaUr916EWKDPqZlki4PQH7ZoDVUMzxVbVgQECHPg7mO01tLvS157f35KvMNE4q-IUDiwEmE59mkqj~wlgqAZIUeLliR99cv-QGVhF5axSyxFRZDpagqSrfDG0w__&Key-Pair-Id=APKAJJ6WELAPEP47UKWQ",
        "width": null,
        "height": null,
        "version": 12
    },
    {
        "type": "240p",
        "uri": "https:\/\/d1wst0behutosd.cloudfront.net\/videos\/14832798\/47815653.mp4?Expires=1491998601&Signature=k2ZbK~V56L2HUuLVhtDs-NYN~c1dY2THZKjnZ1KYp1l8~0g0gj5B8cGZKBmWYKlcoieb~y~klKv-P3r1RCGaZJ7HSy9ijC5qbNRishXghRs1Z3rfN20FJNdW5JYHE7vJBp~MnfiCHsvus67lR0SQ8bv-qI6feAwpzzg4Spc-NIQgE-ybxU3-JMtjXRYKlA73THkemIY8IXPuwzu6YQhzLbpIbSbjosn4uQQwZhIqS0f-gZdxA5yct6OOMMQia1KNcRKMxEhMY2p7k-snNDd3m3gAjW8pvl3EVu1ajtype2veKODFBUbgJVDRz7Q7d6YFK7SqpOZHKjOyk1HDpca6kQ__&Key-Pair-Id=APKAJJ6WELAPEP47UKWQ",
        "width": null,
        "height": null,
        "version": 12
    },
    {
        "type": "720p",
        "uri": "https:\/\/d1wst0behutosd.cloudfront.net\/videos\/14832798\/47815656.mp4?Expires=1491998601&Signature=k~jybnBdS-ZWlPko15KwUjebImrFndzk1dKiNKEUmM5Vg39Q-fW8~vE61WQw4k7nkqGetHA76fWs1GbSaqxW87zWGns3LGy47mNEoM-WA8nTR2CFKoiRvY7OIrLaTVu-jKsaF5SxEb0TvJEz8cyiXduBP5GynYDPZVkl3JG2U2VADsC0oKcyZaapyC~HDs4mPaeRCvpozeWvxHsUu~x6RBWdMQ~K9ayAH9~z8oetB2g90O~Dk25I-pe9G3pP05jlyf2mAJyU36eeBtdj9slFKVxs0FXf1yEabq-Xoije6HNM8Qi470P4z0~c4yxSgTNv8dqhnwASS3OQjV4xDMQP-Q__&Key-Pair-Id=APKAJJ6WELAPEP47UKWQ",
        "width": null,
        "height": null,
        "version": 12
    },
    {
        "type": "1080p",
        "uri": "https:\/\/d1wst0behutosd.cloudfront.net\/videos\/14832798\/47815659.mp4?Expires=1491998601&Signature=IdP5LHRiS8h4sv7tNXgO-Nb~eB9fQHWmRJ-16Z93cVglZcrAJ4c0IyaT~8TyJctp5hwXZlkpWiE4gKDai2IcSaY832wUHX2bkRJGFGUCz-wNU2puHuq41XQP4ug6CzsGz5OrNB2NxOLVVa51OBnGmL6Tjo39GOGl9Z36H-Jx0RBikEfX~YxKzEQ91~JOyfl3f9PnNc~zMiHH0OMY6pIYFlYULYCP1U0FIsqFAArmB7WRiE9r707houUPiXuU7m6OPYdbILMC~hRhNC8djM-RZ3MnwVb6vW40lD5PZ3FYfG7dd8X6Zr0Wc87e50dyawprmQ9G3oa83LZkzUDGfG38fQ__&Key-Pair-Id=APKAJJ6WELAPEP47UKWQ",
        "width": null,
        "height": null,
        "version": 12
    },
    {
        "type": "dash",
        "uri": "https:\/\/api.vid.me\/video\/14832798\/stream?format=dash",
        "width": null,
        "height": null,
        "version": 12
    },
    {
        "type": "hls",
        "uri": "https:\/\/api.vid.me\/video\/14832798\/stream?format=hls",
        "width": null,
        "height": null,
        "version": 12
    }
],