视频默认是隐藏的，点击某一项可以播放对应的视频
这是我的代码：
<!doctype html><html> <head> <meta charset="utf-8"> <title>Video.js 7.4.1</title> <link href="css/video-js.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/video.min.js"></script> <style> .video-parent { width: 960px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; display: none; } .vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button { display: block; } .video-js .vjs-time-control{display:block;} .video-js .vjs-remaining-time{display: none;} .parent .item { width: 200px; height: 200px; background-color: green; font-size: 20px; display: inline-block; color: #fff; } .shadow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }</style> </head> <body> <div class="parent"> <div class="item" data-src="video/1.mp4"> 111 </div> <div class="item" data-src="video/2.mp4"> 222 </div> <div class="item" data-src="video/3.mp4"> 333 </div> </div> <div class="video-parent"> <div class="shadow"></div> <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="960" height="400" poster="m.jpg" data-setup="{}"> <source src="video/1.mp4" type="video/mp4"> <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> </div><script type="text/javascript"> var player; $(".parent .item").click(function() { var src= $(this).attr("data-src"); $("video").attr("src", src); player = videojs('my-video',{ muted: false, controls : true, loop: false, autoplay: false, }); $(".video-parent").show(); player.play(); }); $(".shadow").click(function() { $(".video-parent").hide(); player.pause(); player = ""; }); </script> </body></html>特别注意：
source 标签里的src路径不能为空。
这就是我总结的demo