简体   繁体   中英

Videojs doesnt display the video

Im using the latest version of videojs.

Based on this example http://jsfiddle.net/swinginsam/NWbUG/#share

Source code https://www.dropbox.com/s/me39t5mt34rewqw/video-js.rar

I dont know what's the problem of this.

<!DOCTYPE html>
<html>
<head>
  <title>Video.js | HTML5 Video Player</title>

  <!-- Chang URLs to wherever Video.js files will be hosted -->
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <!-- video.js must be in the <head> for older IEs to work. -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
  <script src="video.js" type="text/javascript"></script>

  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
  <script>
    videojs.options.flash.swf = "video-js.swf";
  </script>


</head>
<body>

  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
  </video>

    <p>
        <span data-vid="01" class="playVid">1</span> 
        <span data-vid="02" class="playVid">2</span> 
        <span data-vid="03" class="playVid">3</span> 
    </p>
  <script>
    var video = _V_("example_video_1", {}, function(){
        // Player (this) is initialized and ready.
    });

    $(".playVid").click(function(){
        var videoName = $(this).attr("data-vid");
        var video = _V_("example_video_1");

        //video.src("http://dev.swinginsam.com/_files/testvid_"+ videoName +".mp4");
        $("video:nth-child(1)").attr("src", "http://dev.swinginsam.com/_files/testvid_"+ videoName +".mp4");
        $("video:nth-child(2)").attr("src", "http://dev.swinginsam.com/_files/testvid_"+ videoName +".webm");
        $("video:nth-child(3)").attr("src", "http://dev.swinginsam.com/_files/testvid_"+ videoName +".ogv");

        video.load();
        video.play();

        //video.src("http://video-js.zencoder.com/oceans-clip.mp4");
    });
  </script>
</body>
</html>

You might want to put the event into the video initialize.

eg:

var video = _V_("example_video_1", {}, function(){
    $(".playVid").click(function(){ ... });
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM