| 前端video做起来很简单，但是还是需要做一些记录，不然下次再做相关的业务仍得费时间找。 |
|
参考地址： |
相关代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Video.js 5.18.4</title>
6 <link href="css/video-js.css" rel="stylesheet">
7 <!-- If you‘d like to support IE8 -->
8 <script src="js/videojs-ie8.min.js"></script>
9 <style>
10 body{background-color: #191919}
11 .m{ width: 640px; height: 264; margin-left: auto; margin-right: auto; margin-top: 100px; }
12 </style>
13 </head>
14
15 <body>
16 <div class="m">
17 <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
18 poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
19 <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
20 <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
21 <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
22 <p class="vjs-no-js">
23 To view this video please enable JavaScript, and consider upgrading to a web browser that
24 <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
25 </p>
26 </video>
27 <script src="http://vjs.zencdn.net/5.18.4/video.min.js"></script>
28 <script type="text/javascript">
29 var myPlayer = videojs(‘my-video‘);
30 videojs("my-video").ready(function(){
31 var myPlayer = this;
32 myPlayer.play();
33 });
34 </script>
35 </div>
36
37 </body>
38 </html>
时间： 2024-10-29 18:30:45