亲宝软件园·资讯

展开

video.js 视频自动全屏播放

本溢 人气:5

1、头部引用脚本

<link href="css/video-js.min.css" rel="stylesheet">
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

2、页面中全部代码

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Video.js 7.4.1</title>
    <link href="css/video-js.min.css" rel="stylesheet">
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
    <style>
      body {
        background-color: #191919
      }
      .m {
        width: 960px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
      }
    </style>
  </head>
    <body>
    <div class="m">
      <video id="my-video" class="video-js" controls preload="auto" width="960" height="400" poster="m.jpg" data-setup="{}">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
        <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
      </video>
      <script src="js/video.min.js"></script> 
      <script type="text/javascript">
        var myPlayer = videojs('my-video');
        videojs("my-video").ready(function(){
          var myPlayer = this;
          myPlayer.requestFullscreen(); // 全屏播放
          myPlayer.play(); // 自动播放
        });
      </script> 
    </div>
</body>
</html>

 

加载全部内容

相关教程
猜你喜欢
用户评论