<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="apple-touch-fullscreen" content="yes" >
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">

    <title>{{$content->title}}</title>
    <link rel="stylesheet" type="text/css" href="{{URL::asset('js/videojs/css/video-js.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::asset('css/base.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::asset('css/slider.css')}}">
    <link rel="stylesheet" type="text/css" href="{{URL::asset('css/layout.css')}}">
    <style type='text/css'>
        body img{width:100%;background: #ffffff;}
        .mnews font,.mnews p{ font-size: 18px; }
        .news_video{width: 100%; height: 10rem; position: relative;  margin-bottom: 1.5rem;}
        .news_video .img{width: 100%; height: 10rem; position: absolute; left:0; top: 0; z-index: 20; display: block;  }
        .news_video img{ width: 100%; height: 100%;}
        .news_video .video{width: 100%; height: 10rem;  position: absolute; left:0; top: 0; z-index: 10;}
        .news_video video{ width: 100%; height: 10rem;}


    </style>
    <style  type="text/css">
        font {
            color:#000000;
        }
        img {
            height: auto;
            width: auto\9;
            width:100%;
            text-align:center;
        }
    </style>
    <script src="{{URL::asset('js/zepto.js')}}"></script>
    <script src="{{URL::asset('js/slider.js')}}"></script>
    <script src="{{URL::asset('js/videojs/js/video.min.js')}}"></script>
    <script src="{{URL::asset('js/videojs/js/zh-CN.js')}}"></script>
    <script src="{{URL::asset('js/videojs/js/videojs-ie8.min.js')}}"></script>
    <script src="{{URL::asset('js/videojs/js/videojs.hotkeys.min.js')}}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('lib/layui/layui.js')}}" charset="utf-8"></script>
</head>
<body style="background-color: #ffffff;">
<div id="wrap">
    <header id="head">
        {{--<div class="mobileTop clearfix">
            <p class="m_logo"><img src="{{URL::asset('images/m_logo.png')}}"/></p>
            <p class="portal_app">
                <span>红枸杞</span>
                <font><!--宁夏本地门户类APP--><!--宁夏广播电视台门户APP-->宁夏广播电视台新闻客户端</font>
            </p>
            <a  href="javascript:void(0);" class="goDownload">下载</a>
        </div>--}}
    </header>
    <div id="content">
        <div class="mnews" style="background-color: #ffffff;">
            <h3 style="font-size: 18px ;text-align: left">{{$content->title}}</h3>
            <font style="font-size: 18px ; text-align: left">来源：{{$content->origin}} {{$content->new_datetime}}</font>
            @if($content->intro != '')
            <p class="content_p" style="padding:8px;font-size: 18px;font:#000000;background-color: #EAEAEA;" style="text-indent:2em;">
                简介：{{$content->intro}}
            </p>
            @endif
            @if(trim($content->video_pic) !='')
                <video id="my-video" class="video-js vjs-big-play-centered vjs-fluid" controls preload="auto" width="640px" height="360px" poster="{{$content->y_video_pic}}" data-setup="{'aspectRatio':'640:360','techOrder': ['html5', 'flash']}">
                    <source src="{{$content->video_url}}" type="video/mp4">
                    <source src="{{$content->video_url}}" type="application/x-mpegURL">
                    <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
                </video>

                <script type="text/javascript">
                    videojs("my-video").ready(function(){
                        var myPlayer = this;
                        myPlayer.play();
                        this.hotkeys({
                            volumeStep: 0.1,
                            seekStep: 5,
                            enableVolumeScroll: false, //禁用鼠标滚轮调节问音量大小
                            enableModifiersForNumbers: false
                        });
                    });

                </script>
            @endif
            <p class="content_p" style="font-size: 18px;font:#000000;" style="text-indent:2em;">
            {!! $content->body !!}
            </p>
            <p style="text-indent:2em;">
            </p>
            {{--<p style="text-indent:2em;">
                <br />
            </p></p>--}}
            <!--<p class="content_p">浏览量：6476</p>-->
        </div>
    </div>
    <footer id="foot"></footer>
    <!--微信入口判断-->
    <div class="weixin_pop androidweixin" style="display:none" onclick="">
        <div class='tip top2bottom clearfix'>
            <img src="{{URL::asset('images/pointer_android_up.png')}}">
            <div class="wechat_text">请点击右上角图示按钮， 选择“<span>在浏览器中打开</span>”，然后进行下载。</div>
        </div>
    </div>
    <div class="weixin_pop iosweixin" style="display:none" onclick="">
        <div class='tip top2bottom clearfix'>
            <img src="{{URL::asset('images/pointer_ios_up.png')}}">
            <div class="wechat_text">请点击右上角图示按钮， 选择“<span>在Safari中打开</span>”，然后进行下载。</div>
        </div>
    </div>
</div>
<script>
    (function (doc, win) {
        var docEl = doc.documentElement,//根元素html
            //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';


            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
        doc.addEventListener('DOMContentLoaded', recalc, false);   //绑定浏览器缩放与加载时间
    })(document, window);
</script>
<script src=" {{URL::asset('js/common.js')}}"></script>
<script src="{{URL::asset('js/mobile.js')}}"></script>
<script type="text/javascript">
    //判断浏览器下载
    $(function()
    {
        //浏览器判断
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {//移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                    weiXin: u.indexOf('MicroMessenger') > -1 ,
                    QQ: u.indexOf('QQ') > -1
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        }
        //判断浏览器下载

        $(".goDownload,.down_but").on("click",function(){
            if(browser.versions.iPhone || browser.versions.iPad || browser.versions.ios){
                //alert("https://itunes.apple.com/us/app/hong-gou-qi/id790073439?l=zh&ls=1&mt=8");return;
                if(browser.versions.weiXin){
                    $(".iosweixin").show();
                }else if(browser.versions.QQ){
                    $(".iosweixin").show();
                }else{
                    location.href= "https://itunes.apple.com/us/app/hong-gou-qi/id790073439?l=zh&ls=1&mt=8";
                }


            }else if(browser.versions.android){
                //alert("http://video.sinosns.cn/nxtv/V3_2_3.apk");return;
                if(browser.versions.weiXin){
                    $(".androidweixin").show();
                }else{
                    location.href="http://video.sinosns.cn/nxtv/V3_2_3.apk";
                }
            }else{
                //alert("123");return;
                location.href="http://video.sinosns.cn/nxtv/V3_2_3.apk";
            }

        })

        $(".androidweixin,.iosweixin").on("click",function(e){
            $(this).hide();
        })
    })
   /* var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fab8ab62edab2a66f3b4358c4adbd08c0' type='text/javascript'%3E%3C/script%3E"));

*/
    liulan();
    //浏览统计
    function liulan(){
        var id = {{$content->id}};
        $.ajax({
            type: "POST",
            url: "{{URL::asset('/api/mobile/set_newsViewCount')}}",
            data:{'id':id},
            dataType: "JSON",
            success: function(data){
                //alert(data);
            }
        });
    }
    //var myChart = document.getElementById("news_img");
    //alert(dom);
    //var myChart = echarts.init(dom);
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener('WebViewJavascriptBridgeReady' , function() {
                callback(WebViewJavascriptBridge)
            }, false );
        }
        // =====以下是iOS必须的特殊处理========
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0);
        // =====以上是iOS必须的特殊处理========
    }
    $("#news_video").on("click",function(params){
        //alert(params);
        //alert(1);
        // 注意：abc是html跟iOS和安卓定义好的一个名字，后面的{}里面是传过去的参数,用这个上面必须得引用header的一堆关于webviewjavascript的js
        setupWebViewJavascriptBridge(function(bridge) {
            bridge.callHandler('interactive', {'video_url':'{{$content->video_url}}'}, function responseCallback(responseData) {
                console.log("OC中返回的参数:", responseData)
            });
        })
    });


</script>
</body>
</html>