CODEWITHSUNDEEP
jquerypythondjangovideojwplayer
picomon
picomon

Reputation: 1519

Unable to Load player when using JWplayer

I'm using JWPlayer 6 in my django website. I want to display different videos on the same page. Due to the fact that I'm iterating over objects, I can't assign different class id's to Jwplayer tag. So when I load it, one video will display while the other will pop out this error:

      Loading the player

I've been looking for a way to fix this yet no success!

Django Template

{% block content %}

   {% for flip in flips %}

     <p> {{flip.title}} </p>
      <center>
          <div id="myElement">Loading the player...</div>
           <script type="text/javascript">
              jwplayer("myElement").setup({
                  image: "{{MEDIA_URL}}/{{flip.vid_image}}",
          source[ {file: "{{MEDIA_URL}}/{{flip.vid_watch}}" },
                 {file: "{{MEDIA_URL}}/{{flip.vid_mp}}" 
                 ],
                   title:"{{flip.title}}",
                   width:692,
                   height:389
                });
              </script>
        </center>
          <p>Description: {{flip.description}} </p>
   {% endblock %}

Upvotes: 1

Views: 344

Answers (1)

picomon
picomon

Reputation: 1519

Here is the answer

 {% block content %}
    {% for flip in flips %}
        <p> {{flip.title}} </p>
   <center>
       <div id="myElement_{{ forloop.counter }}">Loading the player...</div>
          <script type="text/javascript">
             jwplayer("myElement_{{ forloop.counter }}").setup({
                image: "{{MEDIA_URL}}/{{flip.vid_image}}",
                source[ {file: "{{MEDIA_URL}}/{{flip.vid_watch}}" },
                        {file: "{{MEDIA_URL}}/{{flip.vid_mp}}"}
                ],
                title:"{{flip.title}}",
                width:692,
                height:389
            });
          </script>
      </center>
        <p>Description: {{flip.description}} </p>
       {% endfor %}


  {% endblock %}

Thanks to James Herrieven!

Upvotes: 1

Related Questions