yf_zd
/
second


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频详情</title>
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/video-js.min.css' %}">
    <link rel="stylesheet" href="{% static '/css/common.css' %}">
    <link rel="stylesheet" href="{% static '/css/module.css' %}">
    <link rel="stylesheet" href="{% static '/css/allDetail.css' %}">
    <style>
        .advImg {
            background: url(../static/imgs/videoAdv.jpg) no-repeat center;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="headerTxt">
            <div class="wrapper">
                <p class="logoNameCn">休闲农业旅游网</p>
                <p class="logoNameEn">Leisure agricultural tourism network</p>
            </div>

        </div>
        <!-- 广告 -->
        <div class="bjColor advImg"></div>
    </div>
    <!-- 主体部分 -->
    <div class="content">
        <div class="wrapper">
            <div class="newsDiv">
                <!-- 面包屑导航 -->
                <div class="breadcrumb">
                    <span class="layui-breadcrumb">
                        <a href="home">首页</a>
                        <a href="video_list?page=1">视频资讯</a>
                        <a>
                            <cite>详情</cite>
                        </a>
                    </span>
                </div>
                <!-- 新闻详情 -->
                <div class="innerDiv">
                    <div class="detailPageDiv">
                        <h1>{{video.title}}</h1>
                        <div class="time">{{ video.publish_date|date:"Y-m-d"}}</div>
                        <div class="videoItem">
                            <video id="my-video" class="video-js" controls width="526" height="329" poster="{{video.video_img}}" data-setup="{}">
                                <!--preload="auto"-->
                                <source src="{{video.video_url}}" type="video/mp4">
                                <source src="{{video.video_url}}" type="video/webm">
                                <source src="{{video.video_url}}" type="video/ogg">
                                <p class="vjs-no-js">要查看此视频，请启用JavaScript，并考虑升级到一个web浏览器
                                    <a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
                                </p>
                            </video>
                        </div>
                        <div>{{video.intro}}</div>
                        <div class="sequence">
                            {% for news in on_art %}
                                {% if forloop.last %}
                                    <a href="video_detail?id={{news.id}}" class="prevBtn">上一篇：{{news.title}}</a>
                                {% endif%}
                            {% endfor %}

                            {% for news in up_art %}
                                {% if forloop.first %}
                                <a href="video_detail?id={{news.id}}" class="nextBtn">下一篇：{{news.title}}</a>
                                {% endif%}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部版权 -->
    <div class="footer bjColor">
        <div class="wrapper">
            <div class="floatDiv">
                <div class="copyrightTxt">
                    <div>休闲农业旅游网</div>
                    <div>联系人：李四　　联系电话：13811111111</div>
                    <div>地址：河南省郑州市XXXXXXXXXXXXXXXXXXXXXXXXXX</div>
                </div>
                <div class="WeChatCode">
                    <img src="{% static '/imgs/WeChatCode.jpg' %}" alt="">
                    <p>关注公众号</p>
                </div>
            </div>
            <div class="copyright">
                版权所有XXXXXXXXXXXXXXXXXXXXXX
            </div>
        </div>
    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static '/lib/js/video.min.js'%}"></script>

    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element'], function () {
            var element = layui.element;
        });
        // 视频咨询
        var myPlayer = videojs('my-video');
        videojs("my-video").ready(function () {
            var myPlayer = this;
            myPlayer.play();
        });
    </script>
</body>

</html>