Any way to make this code more efficient for video players?

JavaScript
1

I’m trying to have several video players appear onto a web page and load their video, as efficiently(fast) as possible.
I’m interested to learn if this code can be improved for quicker loading? (Or any other ideas on how make several small video players be available on a single web page). Here’s the code I’m currently using:

 <script type="text/javascript">
$(document).ready(function() {
var tn1 = $('.tn3gallery').tn3({
width: 125,
height: 120,
autoplay: false,
image:{
crop:true,
},
content:[{
plugin: "mediaelement",
options: {
 features: ['playpause', 'progress', 'playpause']
 }
 }],
 });
 });
$(document).ready(function() {
var tn1 = $('.tn3gallery1').tn3({
width: 125,
height: 120,
autoplay:false,
image:{
crop:true
},
content:[{
plugin: "mediaelement",
options: {
features: ['playpause','progress', 'playpause']
  }
  }],
  });
  });
$(document).ready(function() {
var tn1 = $('.tn3gallery2').tn3({
width: 125,
height: 120,
autoplay:false,
image:{
crop:true
},
content:[{
plugin: "mediaelement",
options: {
features: ['playpause', 'progress', 'playpause']
  }
  }]
  });
  });
 $(document).ready(function() {
 var tn1 = $('.tn3gallery3').tn3({
width: 125,
height: 120,
autoplay:false,
 image:{
 crop:true
 },
 content:[{
 plugin: "mediaelement",
 options: {
features: ['playpause', 'progress', 'playpause']
}
}]
});
});
$(document).ready(function() {
var tn1 = $('.tn3gallery4').tn3({
width: 125,
height: 120,
autoplay:false,
image:{
crop:true
},
content:[{
plugin: "mediaelement",
options: {
features: ['playpause', 'progress', 'playpause']
}
}]
});
});
$(document).ready(function() {
 var tn1 = $('.tn3gallery5').tn3({
width: 125,
height: 120,
autoplay:false,
image:{
crop:true
},
content:[{
plugin: "mediaelement",
options: {
features: ['playpause', 'progress','playpause' ]
 }
 }]
 });
 });
$(document).ready(function() {
var tn1 = $('.tn3gallery6').tn3({
width: 125,
height: 120,
autoplay:false,
image:{
crop:true
},
content:[{
plugin: "mediaelement",
options: {
features: ['playpause', 'progress','playpause' ]
}
}]
});
});
$(document).ready(function() {
var tn1 = $('.tn3gallery7').tn3({
width: 125,
height: 120,
autoplay:false,
image:{
crop:true
},
content:[{
plugin: "mediaelement",
options: {
features: ['playpause', 'progress', 'playpause']
 }
 }]
 });
 });
 </script>
2

You have the same code block over and over. The only difference is that each time you have a different selector:

$(document).ready(function() {
  var tn1 = $('.tn3gallery1').tn3({
    width: 125,
    height: 120,
    autoplay:false,
    image:{
      crop:true
    },
    content:[{
      plugin: "mediaelement",
      options: {
        features: ['playpause','progress', 'playpause']
      }
    }],
  });
});

That is a candidate for refactoring:

function initPlayer($el){
  $el.tn3({
    width: 125,
    height: 120,
    autoplay: false,
    image:{
      crop:true,
    },
    content:[{
      plugin: "mediaelement",
      options: {
       features: ['playpause', 'progress', 'playpause']
     }
   }],
 });
}

Then to kick it all off:

$("div[class^='tn3gallery'").each(funtion(){
  initPlayer($(this));
});

This should work, but it’s hard to say without seieng some kind of demo.

So, the whole thing:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lots of players</title>
  </head>
  <body>
    <!-- Your HTML here -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      function initPlayer($el){
        $el.tn3({
          width: 125,
          height: 120,
          autoplay: false,
          image:{
            crop:true,
          },
          content:[{
            plugin: "mediaelement",
            options: {
             features: ['playpause', 'progress', 'playpause']
           }
         }],
       });

      $("div[class^='tn3gallery'").each(funtion(){
        initPlayer($(this));
      });
    </script>
  </body>
</html>
3

Try this:

http://www.johns-jokes.com/videos

Curious to now if it loads quickly and how it performs on different platforms.

Tapped in laboriously from a mobile :frowning:

4

Pullo,

Thanks for the reply.
The reason I have :the same code block over and over", (eight actually) is because I have eight players in the accompanying html, Like so:

 <div id="content">
 <div class="tn3gallery">
 <ol>
 <li>
 <div class="tn3 content">
 <video width="130" height="125" type="video/mp4" poster="../img/1.jpg" src="../video/1.mp4"></video>
 </div>
 </li>
  </ol>
 </div>
 </div>

  <div id="content">
  <div class="tn3gallery3">
 <ol>
 <li>
 <div class="tn3 content">
 <video width="130" height="125" type="video/mp4" poster="../img/2.jpg" src="../video/2.mp4"></video>
 </div>
  </li>
  </ol>
  </div>
  </div>

 <div id="content">
  <div class="tn3gallery">
   <ol>
   <li>
  <div class="tn3 content">
  <video width="130" height="125" type="video/mp4" poster="../img/3.jpg" src="../video/3.mp4"></video>
  </div>
  </li>
  </ol>
  </div>
  </div>

  <div id="content">
 <div class="tn3gallery3">
 <ol>
 <li>
 <div class="tn3 content">
 <video width="130" height="125" type="video/mp4" poster="../img/4.jpg" src="../video/4.mp4"></video>
  </div>
  </li>
  </ol>
   </div>
  </div>
 <div id="content">
 <div class="tn3gallery">
  <ol>
  <li>
  <div class="tn3 content">
  <video width="130" height="125" type="video/mp4" poster="../img/5.jpg" src="../video/5.mp4"></video>
  </div>
  </li>
  </ol>
 </div>
 </div>

  <div id="content">
  <div class="tn3gallery3">
  <ol>
  <li>
  <div class="tn3 content">
  <video width="130" height="125" type="video/mp4" poster="../img/6.jpg" src="../video/6.mp4"></video>
 </div>
 </li>
 </ol>
 </div>
 </div>

  <div id="content">
  <div class="tn3gallery">
  <ol>
 <li>
 <div class="tn3 content">
 <video width="130" height="125" type="video/mp4" poster="../img/7.jpg" src="../video/7.mp4"></video>
 </div>
 </li>
 </ol>
 </div>
 </div>

 <div id="content">
 <div class="tn3gallery3">
 <ol>
 <li>
  <div class="tn3 content">
  <video width="130" height="125" type="video/mp4" poster="../img/8.jpg" src="../video/8.mp4"></video>
  </div>
 </li>
 </ol>
  </div>
 </div>

I’m not familiar with the code you provided and am interested in trying it. Will it run eight separate videos? You said my code has “different selectors”. Can you tell me which part of my code was the “selector”? I look forward to your reply.

5

Hey,

The selector is this bit:

$('.tn3gallery1')

Where you are selecting all elements on the page with a class of tn3gallery

You essentially have the same logic eight times (but each time for a different set of elements.

If the class name is just a way of identifying them to the JS (i.e. is not being used to apply styling), you could probably give them all the same class name and do something like this:

$('.tn3gallery').tn3({
  width: 125,
  height: 120,
  autoplay:false,
  image:{
    crop:true
  },
  content:[{
    plugin: "mediaelement",
    options: {
      features: ['playpause','progress', 'playpause']
    }
  }],
});

If you could provide a working demo, then I can tell you more.

6

Thank you again for your reply. Greatly appreciated.
I tried your example without success. Apparently it needs to be different ie: ‘.tn3gallery’ ‘.tn3gallery1’, etc.
Any additional help will be appreciated. I have sent you a PM and look forward to your reply.

7

Hi,

You have a couple of errors on your page.
Could you correct those first:

GET https://../js/tn3.touch.min.js net::ERR_NAME_NOT_RESOLVED
www.xxx.com/:29 GET http://www.xxx.com/themes/thirdparty/jcarousel/skin.css 
(index):139 GET http://www.xxx.com/flowplayer-3.2.16.min.js 
(index):1 GET http://www.xxx.com/skins/tn3/preload.gif 404 (Not Found)
(index):1 GET http://www.xxx.com/skins/tn3/skins/tn3/skins/tn3/skins/tn3/skins/tn3/preload.gif 404 (Not Found)
(index):1 GET http://www.xxx.com/skins/tn3/skins/tn3/skins/tn3/preload.gif 404 (Not Found)
(index):1 GET http://www.xxx.com/skins/tn3/skins/tn3/preload.gif 404 (Not Found)
(index):1 GET http://www.xxx.com/skins/tn3/skins/tn3/skins/tn3/skins/tn3/preload.gif 404 (Not Found)
8

Any help will be appreciated.

9

I’m currently seeing a bunch of 404 error messages. This means that the files you are trying to reference, don’t exist on the server (so maybe you got the wrong path or something).

10

I have extracted the source code from my previous post and made the following demo:

http://www.johns-jokes.com/downloads/sp-d/ChrisJChrisJ-videos/

Source code shown at the bottom of the page.

There are two PHP functions used to create the following list of videos:

<body>
<?php 
  $xs = m_videosAll();
    echo '<pre>'; print_r($xs);  echo '</pre>';
?>
</body>

To change the videos modify the following array()

  $vids  = array 
    (
      '5wh_bifwDoQ', // Trailer stuck, caravan 
      '2sD_8prYOxo', // John Cleese football
      'LarCBChAoeo', // Advert - sheep on track
      'lmBRZ7UR3Rw', // Beer canon montage
      'MENjFkEAj9g', // Bankgok train in market
      'Y7XW-mewUm8', // Pane built in the air
      'kAG39jKi0lI', // Two Ronnies, Apples
     #'lbejNNCTr7k', // 12 days of Christmas
    );
11

Thanks again for your reply. Greatly appreciated.
So I removed all player code except one.
With this - no errors:

<script type="text/javascript">
$(document).ready(function() {
var tn1 = $('.tn3gallery').tn3({
width: 125,
height: 120,
autoplay: false,
touch: {
skin: "tn3t"
},
image:{
crop:true,
 },
content:[{
plugin: "mediaelement",
options: {
features: ['playpause', 'progress', 'playpause']
}
}],
});
});

  <div id="content">
  <div class="tn3gallery">
 <ol>
 <li>
<div class="tn3 content">
<video width="130" height="125" type="video/mp4" poster="../img/test.jpg" src="../video/test.mp4"></video>
</div>
</li>
</ol>
</div>
</div>

But if I add a 2nd player code, like this:

 <div id="content">
<div class="tn3gallery">
<ol>
<li>
<div class="tn3 content">
 <video width="130" height="125" type="video/mp4" poster="../img/test1.jpg" src="../video/test1.mp4"></video>
 </div>
 </li>
</ol>
</div>
 </div>

I get these errors:

http://www......com/skins/tn3/skins/tn3/preload.gif Failed to load resource: the server responded with a status of 404 (Not Found)


http://www......com/video/test1.mp4 Failed to load resource: net::ERR_CONNECTION_RESET

Yet, the videos play successfully.

Any ideas/suggestions/remedy will be appreciated.

12

Hi,

I don’t mean to sound rough, but that page is a mess.
There are mismatching tags, stray tags, missing brackets in the CSS, you are including jQuery three times. It is also very JS heavy and consequently sluggish.

I got a demo working, but had to cut out a lot of irrelevant code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <base href="yourdomain">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Secret Video Project</title>
  <link type="text/css" rel="stylesheet" href="/tn3gallery/skins/tn3/tn3.css"></link>
  <link type="text/css" rel="stylesheet" href="/mediaelement/mediaelementplayer.css" /></link>
  <link href="/video-js/video-js.css" rel="stylesheet"></link>
</head>
<body>
  <div class="tn3gallery">
    <ol>
      <li>
        <div class="tn3 content">
          <video width="130" height="125" type="video/mp4" poster="../img/alana.jpg" src="../video/Bain.mp4"></video>
        </div>
      </li>
    </ol>
  </div>

  <div class="tn3gallery">
    <ol>
      <li>
        <div class="tn3 content">
          <video width="130" height="125" type="video/mp4" poster="../img/alana.jpg" src="../video/Julie.mp4"></video>
        </div>
      </li>
    </ol>
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="/mediaelement/mediaelement-and-player.js"></script>
  <script type="text/javascript" src="/js/jquery.tn3.min.js"></script>
  <script type="text/javascript" src="/js/tn3.touch.min.js"></script>
  <script type="text/javascript" src="/js/tn3.picasa.min.js"></script>
  <script type="text/javascript" src="/js/tn3.mediaelement.min.js"></script>
  <script type="text/javascript">
    $('.tn3gallery').tn3({
      width: 125,
      height: 120,
      autoplay: false,
      touch: {
        skin: "tn3t"
      },
      image:{
        crop:true,
      },
      content:[{
        plugin: "mediaelement",
        options: {
          features: ['playpause', 'progress', 'playpause']
        }
      }],
    });
  </script>
</body>
</html>

Notice how you should include CSS in the head and JS at the bottom of the page.
You will also have to replace the value in the base tag.

HTH

1 Like
13

Thanks for your help

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.