How to show a video on a Jupyter widget on a Jupyter Notebook












1















Assume I have a folder with 4 video files (named like "movie1.mp4", "movie2.mp4" etc.)



I want to use ipywidgets to let the user control which video he desires to see. Like this:



import ipywidgets as wd
from IPython.display import HTML

def showvideo(i):
HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(i))

wd.interact(showvideo, video_number = [1, 2, 3, 4]);


This doesn't work.
but simply calling



from IPython.display import HTML

HTML("""<video width="100" height="100" controls><source src="movie1.mp4" type="video/mp4"></video>""")


works



Is there some python magic that I need to call?










share|improve this question





























    1















    Assume I have a folder with 4 video files (named like "movie1.mp4", "movie2.mp4" etc.)



    I want to use ipywidgets to let the user control which video he desires to see. Like this:



    import ipywidgets as wd
    from IPython.display import HTML

    def showvideo(i):
    HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(i))

    wd.interact(showvideo, video_number = [1, 2, 3, 4]);


    This doesn't work.
    but simply calling



    from IPython.display import HTML

    HTML("""<video width="100" height="100" controls><source src="movie1.mp4" type="video/mp4"></video>""")


    works



    Is there some python magic that I need to call?










    share|improve this question



























      1












      1








      1








      Assume I have a folder with 4 video files (named like "movie1.mp4", "movie2.mp4" etc.)



      I want to use ipywidgets to let the user control which video he desires to see. Like this:



      import ipywidgets as wd
      from IPython.display import HTML

      def showvideo(i):
      HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(i))

      wd.interact(showvideo, video_number = [1, 2, 3, 4]);


      This doesn't work.
      but simply calling



      from IPython.display import HTML

      HTML("""<video width="100" height="100" controls><source src="movie1.mp4" type="video/mp4"></video>""")


      works



      Is there some python magic that I need to call?










      share|improve this question
















      Assume I have a folder with 4 video files (named like "movie1.mp4", "movie2.mp4" etc.)



      I want to use ipywidgets to let the user control which video he desires to see. Like this:



      import ipywidgets as wd
      from IPython.display import HTML

      def showvideo(i):
      HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(i))

      wd.interact(showvideo, video_number = [1, 2, 3, 4]);


      This doesn't work.
      but simply calling



      from IPython.display import HTML

      HTML("""<video width="100" height="100" controls><source src="movie1.mp4" type="video/mp4"></video>""")


      works



      Is there some python magic that I need to call?







      html jupyter-notebook ipywidgets






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 20 '18 at 15:55









      Louise Davies

      4,42121829




      4,42121829










      asked Nov 19 '18 at 16:10









      gotagota

      4861724




      4861724
























          1 Answer
          1






          active

          oldest

          votes


















          2














          You aren't actually displaying the result. Jupyter automatically attempts to display the result of the last line of code in a cell, so that's why your HTML is displaying when doing it manually, but if you are calling it progrmamatically or your HTML isn't on the last line, you have to manually call display() on your HTML.



          Additionally, you aren't specifying the parameter correctly. The parameter name in the function has to match what you supply to interact. Changing your code to this should work:



          def showvideo(video_number):
          display(HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(video_number)))

          wd.interact(showvideo, video_number = [1, 2, 3, 4]);





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378635%2fhow-to-show-a-video-on-a-jupyter-widget-on-a-jupyter-notebook%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            2














            You aren't actually displaying the result. Jupyter automatically attempts to display the result of the last line of code in a cell, so that's why your HTML is displaying when doing it manually, but if you are calling it progrmamatically or your HTML isn't on the last line, you have to manually call display() on your HTML.



            Additionally, you aren't specifying the parameter correctly. The parameter name in the function has to match what you supply to interact. Changing your code to this should work:



            def showvideo(video_number):
            display(HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(video_number)))

            wd.interact(showvideo, video_number = [1, 2, 3, 4]);





            share|improve this answer




























              2














              You aren't actually displaying the result. Jupyter automatically attempts to display the result of the last line of code in a cell, so that's why your HTML is displaying when doing it manually, but if you are calling it progrmamatically or your HTML isn't on the last line, you have to manually call display() on your HTML.



              Additionally, you aren't specifying the parameter correctly. The parameter name in the function has to match what you supply to interact. Changing your code to this should work:



              def showvideo(video_number):
              display(HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(video_number)))

              wd.interact(showvideo, video_number = [1, 2, 3, 4]);





              share|improve this answer


























                2












                2








                2







                You aren't actually displaying the result. Jupyter automatically attempts to display the result of the last line of code in a cell, so that's why your HTML is displaying when doing it manually, but if you are calling it progrmamatically or your HTML isn't on the last line, you have to manually call display() on your HTML.



                Additionally, you aren't specifying the parameter correctly. The parameter name in the function has to match what you supply to interact. Changing your code to this should work:



                def showvideo(video_number):
                display(HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(video_number)))

                wd.interact(showvideo, video_number = [1, 2, 3, 4]);





                share|improve this answer













                You aren't actually displaying the result. Jupyter automatically attempts to display the result of the last line of code in a cell, so that's why your HTML is displaying when doing it manually, but if you are calling it progrmamatically or your HTML isn't on the last line, you have to manually call display() on your HTML.



                Additionally, you aren't specifying the parameter correctly. The parameter name in the function has to match what you supply to interact. Changing your code to this should work:



                def showvideo(video_number):
                display(HTML("""<video width="100" height="100" controls><source src="movie{}.mp4" type="video/mp4"></video>""".format(video_number)))

                wd.interact(showvideo, video_number = [1, 2, 3, 4]);






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 20 '18 at 15:52









                Louise DaviesLouise Davies

                4,42121829




                4,42121829






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378635%2fhow-to-show-a-video-on-a-jupyter-widget-on-a-jupyter-notebook%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    How to change which sound is reproduced for terminal bell?

                    Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

                    Can I use Tabulator js library in my java Spring + Thymeleaf project?