video.js 视频自动全屏播放
本溢 人气:51、头部引用脚本
<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>
加载全部内容