·您当前的位置:首页 > 技术教程 > 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. test_video.addEventListener("timeupdate", function(){ 
  47.     if(test_video.currentTime > 2) 
  48.     { 
  49.         test_video.style.display = 'block'
  50.     } 
  51. }); 
  52.  
  53. function testPlay(){ 
  54.     test_video.play(); 
  55.  
  56.  
  57. window.onresize=function(){ 
  58.     //alert("haha"); 
  59.     test_video.style.width = screen.width; 
  60.     test_video.style.height = screen.height; 
  61.  
  62.  
  63. function portrait(){ 
  64.     test_video.setAttribute("x5-video-orientation", "portrait"); 
  65.  
  66. function landscape(){ 
  67.     test_video.setAttribute("x5-video-orientation", "landscape"); 
  68.  
  69. function autoOrientation(){ 
  70.     test_video.setAttribute("x5-video-orientation", "landscape|portrait") 
  71. </script> 
  72. </body> 
  73. </html> 

 

热门文章推荐

请稍候...

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

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