插件： videojs ------H5网页视频播放

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>后台管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/global.css" media="all">
<link rel="stylesheet" href="css/font-awesome.min.css">

<link id="layuicss-skinlayercss" rel="stylesheet" href="layui/css/modules/layer/default/layer.css" media="all">

<link href="resource/videojs-5.19/video-js.min.css" rel="stylesheet">
<script src="resource/videojs-5.19/video.min.js"></script>

</head>
<body> 
<div class="layui-layout layui-layout-admin">
   <div class="layui-header header header-demo">
      <div class="layui-main">
         <ul class="layui-nav">
            <li class="layui-nav-item">
               <a href="index.html">配置</a>
            </li>
            <li class="layui-nav-item item-curr">
               <a href="index1.html">预览</a>
            </li>
         </ul>
      </div>
   </div>
   <div class="layui-body" style="top:38px; left:0; bottom:0;background-color: #000;">
      <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" data-setup='{}'>
         <source id="player-src" src="" type="rtmp/flv"/></source>
         <p class="vjs-no-js">请启用javascript或者更新浏览器！<a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a></p>
      </video>
   </div>

   <div class="site-tree-mobile layui-hide"><i class="layui-icon">&#xe602;</i></div>
   <div class="site-mobile-shade"></div>

</div>

<style>
   .video-js{
      margin:0 auto;
   }
</style>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/Util.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type='text/javascript'>

$(function(){
   var tokenValue = Util.cookieStorage.getCookie("tokenValue");
     /*function getVideoUrl(){
       var url = ctx + "rtmp";
       var data = {'token_key':tokenValue, 'flag': 0};
       Util.ajaxLoadData(url,data,"POST",true,function(result) {
          if(result.errCode == 200){
             Util.cookieStorage.setCookie("rtmpUrl",result.address);
          } else {
             alert("请求失败！");
          }
       },function() {
       });
    }
    getVideoUrl();*/
    var rtmp_url = Util.cookieStorage.getCookie("rtmpUrl");
    //var rtmp_url = 'rtmp://192.168.2.196/live/start'
    $('#player-src').attr('src', rtmp_url)
    var p_width = window.innerWidth;
    var p_height = window.innerHeight - 38;
    var options = {
        width: p_width,
       height: p_height,
        controls: true,
        autoplay: false,
        preload: 'metadata',
        control: {
            captionsButton: false,
            chaptersButton : false,
            liveDisplay:false,
            playbackRateMenuButton: false,
            subtitlesButton:false
        },
        techOrder: ["flash","html5"]
    };
    var player = videojs('my-player', options, function () {
        this.on('firstplay',function () {
            this.fluid(true);
        });
        this.on('loadeddata',function () {
            setInterval(function(){
                $('.video-js').removeClass('vjs-fluid');
            }, 500)
        })
        this.on('play',function(){
            playAndPause(0);
        });
        this.on('pause',function(){
            playAndPause(1);
        });
    });

    function playAndPause(param){
        var url = ctx + "rtmp";
        var data = {'token_key':tokenValue, 'flag': param};
        Util.ajaxLoadData(url,data,"POST",true,function(result) {
            if(result.errCode == 200){
                if (result.address) {
                    Util.cookieStorage.setCookie("rtmpUrl",result.address);
                }
            } else {
                alert("请求失败！");
            }
        },function() {
        });
    }

// rtmp://live.hkstv.hk.lxdns.com/live/hks

    function promptOnClose(e){
        playAndPause(1);
        e = e ? e : windowevent;
    }
    if(window.Event){//主流浏览器
        playAndPause(1);
        window.onbeforeunload = function(event){
            return promptOnClose(event);
        }
    }else{//非主流浏览器
        playAndPause(1);
        window.onbeforeunload = function(){
            return promptOnClose(event);
        }
    }


})
</script>
<script>
   layui.use(['element', 'layer'], function() {
      var element = layui.element(),
         $ = layui.jquery,
            layer = layui.layer;
      //iframe自适应
      $(window).on('resize', function() {
         var $content = $('.admin-nav-card .layui-tab-content');
         $content.height($(this).height() + 52);
         $content.find('iframe').each(function() {
            $(this).height($content.height());
         });
      }).resize();
      //手机设备的简单适配
      var treeMobile = $('.site-tree-mobile'),
         shadeMobile = $('.site-mobile-shade');
      treeMobile.on('click', function() {
         $('body').addClass('site-mobile');
      });
      shadeMobile.on('click', function() {
         $('body').removeClass('site-mobile');
      });
   });
</script>
<script type="text/javascript">
layui.config({
    base: 'js/'
});
</script>
</body>
</html>
插件： videojs ------H5网页视频播放

猜你喜欢
