当前位置：移动技术网 > IT编程>开发语言>.net > asp.net core + 前端H5 页面视频站制作尝试

asp.net core + 前端H5 页面视频站制作尝试

2018年07月04日 | 移动技术网IT编程 | 我要评论

雅天妮中国有限公司,赵四搞笑视频,光磁之路

.net core 2.1出来一段时间了，一直关注，前周花了半天时间学习了一下，特制作了一个视频小站（欢迎扫码体验）：

页面首页效果如下：

播放页面效果如下：

部分代码：

using ENT.IBLL;
using ENT.WebApp.IModels;
using ENT.WebApp.ViewModels;
using NCore;
using NCore.Web.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ENT.WebApp.Models
{
    public class HomeModel : ModelCore, IHomeModel
    {
        public override Type ThisClassType => this.GetType();

        public IinformationBLL IinformationBLL { get; set; }

        public IEnumerable<PlayViewModel> GetVideoSwipers()
        {
            var res = new List<PlayViewModel>().AsEnumerable();
            var dtos = this.IinformationBLL.Page(f => f.flow > 10, 0, 5, null, null);
            if (dtos != null)
            {
                res = dtos.Map<IEnumerable<PlayViewModel>>();
            }
            return res;
        }


        public IEnumerable<PlayViewModel> GetNewVideos()
        {
            var res = new List<PlayViewModel>().AsEnumerable();
            var dtos = this.IinformationBLL.Page(null, 0, 4, null, new string[] { " creation_time " });
            if (dtos != null)
            {
                res = dtos.Map<IEnumerable<PlayViewModel>>();
            }
            return res;
        }

        public IEnumerable<PlayViewModel> GetHotVideos()
        {
            var res = new List<PlayViewModel>().AsEnumerable();
            var dtos = this.IinformationBLL.Page(null, 0, 50, null, new string[] { " flow " });
            if (dtos != null)
            {
                res = dtos.Map<IEnumerable<PlayViewModel>>();
            }
            return res;
        }

        public HomeViewModel GetVideoViewModel(string id)
        {
            var res = new HomeViewModel();
            res.video_swipers = this.GetVideoSwipers();
            res.newvideos = this.GetNewVideos();
            res.hotvideos = this.GetHotVideos();
            return res;
        }

    }
}

@model HomeViewModel
@{
    ViewData["Title"] = "视频";
}
<link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
<style>
    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

        .swiper-slide img {
            width: 100%;
        }

    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: #ff2c55;
    }
</style>
<div class="home_video">
    <div class="home_swiper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @foreach (var item in Model.video_swipers)
                {
                    <div class="swiper-slide"><a href="~/play/details/@item.id"><img src="@item.img" /></a></div>
                }
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="newday">
        <div class="title"><i class="ylyqiconfont" id="n_back">&#xe673;</i> 最近更新</div>
        <div class="list">
            @foreach (var item in Model.newvideos)
            {
                <div class="item">
                    <a href="~/play/details/@item.id">
                        <div class="img"><img src="@item.img" /></div>
                        <div class="des">@item.title</div>
                    </a>
                </div>
            }
            <div class="clearfix"></div>
        </div>
    </div>


    <div class="newday">
        <div class="title"><i class="ylyqiconfont" id="n_back">&#xe624;</i> 猜你喜欢</div>
        <div class="list">
            @foreach (var item in Model.hotvideos)
            {
                <div class="item">
                    <a href="~/play/details/@item.id">
                        <div class="img"><img src="@item.img" /></div>
                        <div class="des">@item.title</div>
                    </a>
                </div>
            }
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        }, autoplay: {
            delay: 3000,
        }
    });
</script>

using ENT.IBLL;
using ENT.WebApp.IModels;
using ENT.WebApp.ViewModels;
using NCore;
using NCore.Web.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ENT.WebApp.Models
{
    public class PlayModel : ModelCore, IPlayModel
    {
        public IinformationBLL IinformationBLL { get; set; }

        public override Type ThisClassType => this.GetType();

        public PlayViewModel GetPlayViewModel(string vid)
        {
            var vm = new PlayViewModel();
            vm.PlayViewModels = new List<PlayViewModel>().AsEnumerable();
            try
            {
                if (!vid.IsNullOrEmpty())
                {
                    var dto = this.IinformationBLL.FirstOrDefault(f => f.id == vid);
                    if (dto != null)
                    {
                        vm = dto.Map<PlayViewModel>();
                        var cvms = this.IinformationBLL.Page(f => f.classify_id == vm.classify_id, 1, 10, null, new string[] { " flow " });
                        if (cvms != null)
                        {
                            vm.PlayViewModels = cvms.Map<IEnumerable<PlayViewModel>>();
                        }
                        dto.flow += 1;
                        this.IinformationBLL.Update(dto);
                    }
                }
                else
                {
                    vm.max_img = "http://vjs.zencdn.net/v/oceans.png";
                    vm.src = "http://vjs.zencdn.net/v/oceans.mp4";
                    vm.title = "饥饿的海鸥";
                }
            }
            catch (Exception ex)
            {
                this.Logger.Error(ex);
            }
            return vm;
        }
    }
}

@{
    Layout = null;
}
@model PlayViewModel;
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>@Model.title</title>
    <link href="https://cdn.bootcss.com/video.js/7.0.3/video-js.min.css" rel="stylesheet">
    <link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" />
    <script src="https://cdn.bootcss.com/video.js/7.0.3/video.min.js"></script>
    <script src="https://cdn.bootcss.com/video.js/7.0.3/lang/zh-CN.js"></script>
    <style>

        .vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button {
            display: block;
        }

        .video-js .vjs-big-play-button {
            font-size: 2.5em;
            line-height: 2.3em;
            height: 2.5em;
            width: 2.5em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 2.5em;
            background-color: #73859f;
            background-color: rgba(115,133,159,.5);
            border-width: 0.15em;
            margin-top: -1.25em;
            margin-left: -1.75em;
        }
        /*中间的播放箭头*/
        .vjs-big-play-button .vjs-icon-placeholder {
            font-size: 1.63em;
        }
        /*加载圆圈*/
        .vjs-loading-spinner {
            font-size: 2.5em;
            width: 2em;
            height: 2em;
            border-radius: 1em;
            margin-top: -1em;
            margin-left: -1.5em;
        }
    </style>
</head>
<body>
    <div class="video_details">
        <div class="main">
            <div class="head">
                <a href="~/home/index/1"><i class="ylyqiconfont" id="n_back">&#xe604;</i></a>
                <i class="ylyqiconfont" id="n_support">&#xeeda;</i>
                <i class="ylyqiconfont" id="n_opposition">&#xeed3;</i>
                <i class="ylyqiconfont" id="n_collection">&#xe66c;</i>
                <i class="ylyqiconfont" id="n_share">&#xe616;</i>
                <i class="ylyqiconfont addf"><a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU5NzY1Mjg3Nw==&scene=110#wechat_redirect">&#xe613;</a></i>
            </div>
            <div class="video">

                <video id="myvideo" class="video-js vjs-big-play-centered vjs-fluid" controls height="264" preload="auto" poster="@Model.img" data-setup="{}">
                    <source src="@Model.src" type="video/mp4">
                </video>
            </div>
            <div class="videoinfo">
                <div class="title">@Model.title</div>
                <div class="info">
                    <div class="left">@(Model.flow + Model.default_flow)次播放  @(Model.support)赞  @(Model.creation_time.Value.ToString("yyyy-MM-dd HH:mm"))</div>
                    <div class="right"><a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU5NzY1Mjg3Nw==&scene=110#wechat_redirect"><i class="ylyqiconfont">&#xe613;</i>关注娱来娱趣</a></div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="video_nav">
                <div class="video_nav_main">
                    <a href="~/home/index/1">
                        <div class="v_left"><img src="~/images/video.png" /></div>
                        <div class="v_right">
                            <div class="left">
                                搞笑视频
                                <div class="des">
                                    包含搞笑短片、搞笑配音、爆笑节目、童趣萌宠、雷人囧事、幽默短片等。让你笑口常开，甩掉烦恼...
                                </div>
                            </div>
                            <div class="right"><div class="init">进入<i class="ylyqiconfont">&#xe74e;</i></div></div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                </div></a>
            </div>
            <div class="video_recommend">
                <div class="title">
                    <div class="left"><i class="ylyqiconfont">&#xe6c9;</i>大家都在看</div>
                    <div class="right"><a href="~/home/index/1">全部<i class="ylyqiconfont">&#xe81c;</i></a></div>
                    <div class="clearfix"></div>
                </div>
                <div class="list">
                    @foreach (PlayViewModel item in Model.PlayViewModels)
                    {
                        <div class="item">
                            <a href="~/play/details/@item.id">
                                <div class="left">
                                    <div class="title">@item.title</div>
                                    <div class="info">
                                        @(item.flow + item.default_flow)次播放  @(item.support)赞  @(item.creation_time.Value.ToString("yyyy-MM-dd HH:mm"))
                                    </div>
                                </div>
                                <div class="right">
                                    <i class="ylyqiconfont">&#xe60c;</i>
                                    <img src="@item.img" />
                                </div>
                                <div class="clearfix"></div>
                            </a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
    <script src="~/js/site.min.js"></script>
</body>
</html>

代码我就不一一粘了，直接下载吧：

https://pan.baidu.com/s/15OxmoBGB4rzGXCsQwcJhwA

代码写得不好勿喷。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端

距离上次提出 [Asp.Net Core] Blazor Server Side 扩展用途 - 配合CEF来制作带浏览器核心的客户端软件的想法后,&#... [阅读全文]
武装你的WEBAPI-OData入门

本文属于OData系列目录（可能会有后续修改） "武装你的WEBAPI OData入门" 武装你的WEBAPI OData便捷查询武装你的WEBAP... [阅读全文]
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)

依赖倒置原则(DIP) 依赖倒置(Dependency Inversion Principle,缩写DIP)是面向对象六大基本原则之一。他是指一种特定的... [阅读全文]
DevExpress+Winform（四）

视频：https://www.bilibili.com/video/BV15x411x7WN?p=5 新建Devexpress Winform Blan... [阅读全文]
Jenkins之Nunit的应用

一、在Jenkins中安装Nunit插件进入jenkins的插件管理模块，下载Nunit插件。此步骤不做截图说明二、引用nunit.console的nu... [阅读全文]
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布

框架介绍这是一个基于vue、element-ui、iview、.netcore3.1 可支持前端、后台动态扩展业务代码快速开发框架。框架内置定制开发... [阅读全文]
微信退款（在.net core 用http方式请求）

微信JSAPI支付申请退款接口地址接口链接：https://api.mch.weixin.qq.com/secapi/pay/refund 是否需... [阅读全文]
Owin Katana 的底层源码分析

最近看了一下开源项目asp.net katana，感觉公开的接口非常的简洁优雅，channel 9 说是受到node.js的启发设计的，Katana是一... [阅读全文]
jenkins发布application且并运行

一、发布配置差异配置：编译内容编译目标NetWorkClient/KJ90NetClient.csproj编译命令/t:build/p:Configur... [阅读全文]
WPF 简易日期控件魔改ListBox

先上截图修正：应该将SetTime方法修改为，行号为207行开始修改 var nk = Day_of_week(year, month, 1); i... [阅读全文]

网友评论


验证码：

asp.net core + 前端H5 页面视频站制作尝试

2018年07月04日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论