视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

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

[html5]H5播放器：竖屏播放\横屏播放\跟随旋转例子

时间:2018-12-03 09:44腾讯
[html5]H5播放器：竖屏播放\横屏播放\跟随旋转例子

[html5]H5播放器：竖屏播放\横屏播放\跟随旋转例子

  1. <!DOCTYPE html><html lang="en"> 
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  4.     <meta name="author" content="monicaqin"> 
  5.     <meta name="format-detection" content="telephone=no" /> 
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> 
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  8.     <meta name="apple-mobile-web-app-capable" content="yes" /> 
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
  10.     <title>测试视频test</title> 
  11.    
  12. </head> 
  13.  
  14. <body> 
  15.   
  16. <div> 
  17. <video id="test_video" src="advideo.mp4" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" 
  18.   autoplay></video> 
  19. </div> 
  20.  
  21. <div style="position:relative;top:-100px;"> 
  22.         <input type="button" value="竖屏播放" onclick="portrait();"></input> 
  23.         <input type="button" value="横屏播放" onclick="landscape();"></input> 
  24.         <input type="button" value="跟随旋转" onclick="autoOrientation();"></input> 
  25. </div> 
  26.  
  27.  
  28.  
  29. <script type = "text/javascript"> 
  30.     test_video.style.width = screen.width + "px"; 
  31.     test_video.style.height = "100%";    
  32. </script> 
  33.              
  34.  
  35. <div> 
  36. <canvas id="test"/> 
  37. </div> 
  38.  
  39.  
  40. <script type = "text/javascript"> 
  41. window.onresize=function(){ 
  42.     //alert("haha"); 
  43.     test_video.style.width = screen.width; 
  44.     test_video.style.height = screen.height; 
  45. } 
  46.  
  47. test_video.addEventListener("timeupdate", function(){ 
  48.     if(test_video.currentTime > 2) 
  49.     { 
  50.         test_video.style.display = 'block'; 
  51.     } 
  52. }); 
  53.  
  54. function testPlay(){ 
  55.     test_video.play(); 
  56. } 
  57.  
  58.  
  59. window.onresize=function(){ 
  60.     //alert("haha"); 
  61.     test_video.style.width = screen.width; 
  62.     test_video.style.height = screen.height; 
  63. } 
  64.  
  65.  
  66. function portrait(){ 
  67.     test_video.setAttribute("x5-video-orientation", "portrait"); 
  68. } 
  69.  
  70. function landscape(){ 
  71.     test_video.setAttribute("x5-video-orientation", "landscape"); 
  72. } 
  73.  
  74. function autoOrientation(){ 
  75.     test_video.setAttribute("x5-video-orientation", "landscape|portrait") 
  76. } 
  77. </script> 
  78. </body> 
  79. </html> 

 

热门文章推荐

请稍候...

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

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