网页视频播放video.js,html4/5,支持苹果设备

< !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="video.js"></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 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
  </video>

</body>
</html>

多视频连续播放,静音

<script>
  var myPlayer = videojs('example_video_1');  
  myPlayer.on('ended', function(){
    var curSrc = myPlayer.currentSrc();
   
    if(curSrc.indexOf('img/video2.mp4')>0){
        myPlayer.src('img/ruiheng.mp4');
    }else{
        myPlayer.src('img/video2.mp4');
    }  
    myPlayer.volume(0);
    myPlayer.currentTime(0);
    myPlayer.play();
  });
  myPlayer.volume(0);
  myPlayer.play();
  </script>

资源下载:video-js-4.5.1

Leave a Comment

Your email address will not be published.

*