视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]html5视频播放器几个常用的范例源代码(2)

时间:2017-03-09 18:27bug315
实例1：播放视频，视频框的宽度320像素（width=320）、高240像素（height=240）、显示控制按钮（controls=controls）且自动播放（autoplay=autoplay）。 !DOCTYPEHTML html head title HTML5（视频播放） / title m

实例1：播放视频，视频框的宽度320像素（width=320）、高240像素（height=240）、显示控制按钮（controls=controls）且自动播放（autoplay=autoplay）。

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <title>HTML5（视频播放）</title> 
  5.         <meta charset="UTF-8"> 
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.     </head> 
  8.     <video width="320" height="240" controls="controls" autoplay="autoplay"> 
  9.         <source src="doc/movie.ogg" type="video/ogg"> 
  10.         <source src="doc/movie.mp4" type="video/mp4"> 
  11.         Your browser does not support the video tag. 
  12.    </video> 
  13. </html> 

实例2：循环播放视频。使用loop属性来控制循环播放。

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <title>HTML5（视频播放）</title> 
  5.         <meta charset="UTF-8"> 
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.     </head> 
  8.     <video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop"> 
  9.         <source src="doc/movie.ogg" type="video/ogg"> 
  10.         <source src="doc/movie.mp4" type="video/mp4"> 
  11.         Your browser does not support the video tag. 
  12.    </video> 
  13. </html> 

实例3：测试video标签的src属性

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <title>HTML5（视频播放）</title> 
  5.         <meta charset="UTF-8"> 
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.     </head> 
  8.     <video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop" src="doc/movie.ogg"></video> 
  9. </html> 

运行效果图：

HTML5视频教程运行效果图

来源：http://www.bug315.com/article/240.htm

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器