Videojs不显示视频

Videojs doesnt display the video

本文关键字：视频 显示 Videojs      更新时间：2023-09-26

Im使用的是最新版本的videojs。

基于此示例http://jsfiddle.net/swinginsam/NWbUG/#share

源代码https://www.dropbox.com/s/me39t5mt34rewqw/video-js.rar

我不知道这是怎么回事。

<!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>

您可能需要将事件放入视频初始化中。

例如：

var video = _V_("example_video_1", {}, function(){
    $(".playVid").click(function(){ ... });
});
相关文章：