首页 > 代码库 > HTML 视频（Videos）

HTML 视频（Videos）

2024-10-06 13:04:02   217人阅读

前端video做起来很简单，但是还是需要做一些记录，不然下次再做相关的业务仍得费时间找。

 

 

 

 

参考地址：

http://www.jq22.com/jquery-info404

 

http://www.runoob.com/html/html-videos.html

 

 

 

 

 

 

相关代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Video.js 5.18.4</title>
 6     <link href="http://www.mamicode.com/css/video-js.css" rel="stylesheet">
 7     <!-- If you‘d like to support IE8 -->
 8     <script src="http://www.mamicode.com/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>

 

HTML 视频（Videos）


联系
我们