码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 自制本地网页视频播放器

时间:2015-07-27 20:37:24      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

HTML5初试:本地视频用网页打开啦半个广告都可以没有,看来暴风什么的快要淘汰了。
视频格式还是有要求的,看来要备一个转码器。

格式

IE

Firefox

Opera

Chrome

Safari

Ogg

No

3.5+

10.5+

5.0+

No

MPEG 4

9.0+

No

No

5.0+

3.0+

WebM

No

4.0+

10.6+

6.0+

No

 1 <!DOCTYPE html>
 2 <html> 
 3 <body> 
 4 
 5 <div style="text-align:center;">
 6   <button onclick="playPause()">播放/暂停</button> 
 7   <button onclick="makeNormal()"></button>
 8   <button onclick="makeSmall()"></button>
 9   <button onclick="makeBig()"></button>
10   <br />     
11   <video id="video1" width="1000" controls="controls style="margin-top:15px;" >
12     <source src="G:\录像片段\速度与激情7 720p mp4.mp4" type="video/mp4" />
13    <!-- <source src="G:\录像片段\名侦探柯南 业火的向日葵.ogg" type="video/ogg" /> -->
14     Your browser does not support HTML5 video.
15   </video>
16 </div> 
17 
18 <script type="text/javascript">
19 var myVideo=document.getElementById("video1");
20 
21 function playPause()
22 { 
23 if (myVideo.paused) 
24   myVideo.play(); 
25 else 
26   myVideo.pause(); 
27 } 
28 
29 function makeBig()
30 { 
31 myVideo.width=1400; 
32 } 
33 
34 function makeSmall()
35 { 
36 myVideo.width=600; 
37 } 
38 
39 function makeNormal()
40 { 
41 myVideo.width=1000; 
42 } 
43 </script> 
44 
45 </body> 
46 </html>

 

HTML5 自制本地网页视频播放器

标签:

原文地址:http://www.cnblogs.com/dzzy/p/4681068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!