【定制项目】【M15 消防安全宣传】主要模块：视频 + 音频 + 图标 + 问答游戏

目录

​​一、项目需求​​

​​二、效果展示​​

​​1、动态视频​​

​​2、切片效果图 ​​

​​主页​​

​​公益宣传片（视频MP4）， 火灾启示录（视频MP4），消防宣教员（视频MP4），消防设施原理（视频MP4） ​​

​​视频播放页 -  自动播放 + 循环播放​​

​​ 消防标识识别模块​​

​​游戏问答模块​​

​​三、项目架构​​

​​四、项目分析​​

​​1、http服务器：go 语言​​

​​http 服务器代码​​

​​打开浏览器命令代码​​

​​2、前端技术 html + javascript；​​

​​3、动态配置项​​

​​五、更多案例​​

一、项目需求

项目名称：【消防安全宣传】。

功能模块（共6个模块）：公益宣传片（视频MP4）， 火灾启示录（视频MP4），消防宣教员（视频MP4），消防设施原理（视频MP4），消防标识识别（大图标宣传展示），消防体验游戏（互动游戏）。

功能说明：各个模块图片，视频，音乐等素材可动态配置，实时生效；

                  游戏问题数量可定义N个，程序自动随机选择不重复的问题；

项目工期：15个工作日。

二、效果展示

1、动态视频

2、切片效果图 

主页

公益宣传片（视频MP4）， 火灾启示录（视频MP4），消防宣教员（视频MP4），消防设施原理（视频MP4） 

视频播放页 -  自动播放 + 循环播放

 消防标识识别模块

点击图标后放大效果

游戏问答模块

开始页 

问题页

答案提示页

问答结束页

三、项目架构

• 触摸屏 Windows系统，分辨率 1920*1080px；（代码支持运行环境Windows，Linux类系统。）
• 可执行程序exe 开机自启动，自动全屏最大化；
• B/S架构，支持Chrome，IE，QQ等主流浏览器；
• http服务器：go 语言。

四、项目分析

1、http服务器：go 语言

http 服务器代码

func main() {
  go browser()

  r := gin.Default()

  r.StaticFS("/static", http.Dir("./static")) 

  r.Run(":" + strconv.Itoa(http_port)) //默认在本地8080端口启动服务
}

打开浏览器命令代码

func browser(){
  cmd := exec.Command("./Browser/chrome.exe", "--kiosk", "http://127.0.0.1:" + strconv.Itoa(http_port) + "/static/index.html")

  err := cmd.Run()
  
  fmt.Printf("%s, error:%v \n", "cmd", err)
}

2、前端技术 html + javascript；

<div id="base" class="">

    <!-- 背景 (Image) -->
    <div id="u1" class="ax_default image">
      <img id="u1_img" class="img " src="images/index/u1.png" />
      <div id="u1_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- 1 公益 (Image) -->
    <div id="u2" class="ax_default image" onclick="play_video('gongyi')">
      <img id="u2_img" class="img " src="images/index/u2.png" />
      <div id="u2_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- 2 启示 anli (Image) -->
    <div id="u3" class="ax_default image" onclick="play_video('qishi')">
      <img id="u3_img" class="img " src="images/index/u3.png" />
      <div id="u3_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- 3 宣教  (Image) -->
    <div id="u4" class="ax_default image" onclick="play_video('xuanjiao')">
      <img id="u4_img" class="img " src="images/index/u4.png" />
      <div id="u4_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- 4 设施 (Image) -->
    <div id="u5" class="ax_default image" onclick="play_video('sheshi')">
      <img id="u5_img" class="img " src="images/index/u5.png" />
      <div id="u5_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- 5 标识 (Image) -->
    <div id="u6" class="ax_default image">
      <img id="u6_img" class="img " src="images/index/u6.png" />
      <div id="u6_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>

    <!-- 6 游戏 (Image) -->
    <div id="u7" class="ax_default image">
      <img id="u7_img" class="img " src="images/index/u7.png" />
      <div id="u7_text" class="text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>


  </div>

3、动态配置项

[
    {
        "question": "下面哪个是119火警电话标识？",
        "answer": "u111.png",
        "answer_list": {
            "A": "u131.png",
            "B": "u161.png",
            "C": "u111.png",
            "D": "u151.png"
        }
    },
    {
        "question": "下面哪个是消防栓标识？",
        "answer": "u171.png",
        "answer_list": {
            "A": "u161.png",
            "B": "u311.png",
            "C": "u171.png",
            "D": "u151.png"
        }
    },
    {
        "question": "下面哪个是安全通道标识？",
        "answer": "u131.png",
        "answer_list": {
            "A": "u111.png",
            "B": "u131.png",
            "C": "u181.png",
            "D": "u141.png"
        }
    },
    {
        "question": "下面哪个是禁止堆放杂物标识？",
        "answer": "u331.png",
        "answer_list": {
            "A": "u371.png",
            "B": "u321.png",
            "C": "u341.png",
            "D": "u331.png"
        }
    },
    {
        "question": "下面哪个是消防通道标识？",
        "answer": "u221.png",
        "answer_list": {
            "A": "u361.png",
            "B": "u351.png",
            "C": "u331.png",
            "D": "u221.png"
        }
    }
]

五、更多案例

​​YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV数据可视化的博客_datav案例​​

本次分享结束，欢迎交流，需要定制项目请私聊~