習課的視頻播放器 video.js

時間 2020-08-21

原文原文鏈接

jspjavascript

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="ctx"></c:set>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>聽評課人員評課</title>

    <!-- Bootstrap -->
    <link href="${ctx }/css/ui/bootstrap.min.css" rel="stylesheet">
    <!-- 基本樣式 -->
    <link href="${ctx }/css/core/base.css" rel="stylesheet">
    <!--通用css樣式-->
    <link rel="stylesheet" href="${ctx }/css/layout/frame_style.css">
    <link rel="stylesheet" href="${ctx }/css/com/comui_style.css">

    <link rel="stylesheet" href="${ctx }/css/layout/layout_style2.css">
    <link rel="stylesheet" href="${ctx }/css/layout/me.css">
    <link rel="stylesheet" href="${ctx }/css/layout/me_f.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type='text/javascript' src='${ctx }/js/core/jquery-1.11.1.min.js'></script>
    <script src="http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script>
    <script type="text/javascript" src="${ctx}/js/video/video.js"></script>

</head>
<body>
<div class="cy_wrap">
    <!--頭部 START-->
    <h1 class="cy_header">
        <div class="con_area">
            <div class="fl">
                <a class="fl cy_header_logo"><img src="${ctx }/images/xk-logo.png"></a>

                <div class="fl cy_header_search">
                    <input placeholder="請輸入關鍵詞" class="input_navsearch_con">
                    <button class="input_navsearch_btn"></button>
                </div>
            </div>
            <div class="fr text-right cy_header_set">
                <a href="">設置</a>
                <a class="border_0 paddingR_not" href="">退出</a>
            </div>
        </div>
    </h1>
    <!--頭部 END-->
    <!--視頻播放-盒子 START-->
    <div class="cy_video_box paddingt20">
        <!--當前位置 START-->
        <div class="current_osition marginT_not">
            <span>首頁</span>
            <span class="current_osition_arrow"></span>
            <a href="">評課管理</a><span class="current_osition_arrow"></span>
            <span>評課標準</span>
        </div>
        <!--當前位置 END-->
        <!--視頻播放 START-->
        <div class="con_area positionR">

            <!--放視頻的盒子-->
            <div class="cy_video_con" id="id_video_container"></div>


            <!--標籤-正在進行-結束-->
            <span class="cy_video_label"></span>
            <!--在線交流-->
            <div class="cy_video_onlinewrap">
                <span class="cy_video_online_tag">在線交流</span>
                <dl class="cy_video_online_con">
                    <dt class="cy_video_online_con_l"></dt>
                    <dd class="cy_video_online_con_r">
                        <p class="cy_video_online_con_r_title">《夸父逐日》</p>
                    </dd>
                </dl>
            </div>
        </div>
        <!--視頻播放 END-->
    </div>
    <!--視頻播放-盒子 END-->
    <!--評課-盒子 START-->
    <div class="con_area cy_teaching_box_con">
        <!--評課-視頻信息 START-->
        <div class="cy_teaching_box_con_t">
            <h2 class="f24 paddingb15">《${courseInfo.resourceName}》<span class="fr f20">瀏覽：&nbsp;&nbsp;20</span></h2>

            <p><span class="txt_999">發佈人：</span>${staff.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                    class="txt_999">發佈時間：</span><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${courseInfo.createTime}"/><span
                    <%--class="txt_999">發佈時間：</span>2015-12-19&nbsp;&nbsp;&nbsp;12：12：12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span--%>
                    class="txt_999">授課教師：</span>${staff.name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                    class="txt_999">授課時間：</span><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${courseInfo.teachingTime}"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                    class="txt_999">活動結束時間：</span><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${courseInfo.lastReviewTime}"/></p>

            <p><span class="txt_999">授課地點：</span>${courseInfo.teachingAddress}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                    class="txt_999">授課科目：</span>${courseInfo.teachingProject}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="txt_999">所屬年級：</span>${courseInfo.belongGrade}
            </p>
        </div>
        <!--評課-視頻信息 END-->
        <!--評課-評分-評論-詳情 START-->
        <div class="cy_teaching_box_con_b">
            <!--評課標準設置-選項卡-->
            <dl class="criterion_menu_tab">
                <dt class="criterion_menu_tab_list criterion_menu_pitch"
                    onclick="javascript:gourl('evaluation_ongoing_grade');">評分
                </dt>
                <dt class="criterion_menu_tab_list" onclick="javascript:gourl('evaluation_ongoing_comment');">評論（12）
                </dt>
                <dt class="criterion_menu_tab_list" onclick="javascript:gourl('evaluation_ongoing_details');">詳情</dt>
            </dl>
            <!--評課標準設置-選項卡-內容-->
            <div id="content"></div>
        </div>
        <!--評課-評分-評論-詳情 END-->
    </div>
</div>
<!--評課-盒子 END-->
<!--footer START-->
<div class="cy_footer">
    <div class="cy_footer_b">©2014-2016 &nbsp;&nbsp;&nbsp; 版權全部 &nbsp;&nbsp;&nbsp; 廣東習課軟件科技有限公司全部 &nbsp;&nbsp;&nbsp;
        ICP備13006852號-1
    </div>
</div>
<!--footer END-->

</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type='text/javascript' src='${ctx }/js/core/jquery-1.11.1.min.js'></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${ctx }/js/ui/bootstrap.min.js"></script>
<!--手寫的js-->
<script src="${ctx }/js/com/ui_commonly.js"></script>
<script src="${ctx }/js/com/ch-table.js"></script>

</body>
</html>

<script type="text/javascript">

    $(document).ready(
    function() {
        var width = $("#id_video_container").width();
        var height = $("#id_video_container").height();
        videoInitFileId("id_video_container", width, height, "${sessionScope.courseInfo.resoursePath}", "${ctx}"); });

    $("#content").load("evaluation_ongoing_grade");
    /*評課標準設置-選項卡*/
    function gourl(a) {
        /*設置參評課角色*/
        if (a == 'evaluation_ongoing_grade') {

            $("#content").load("evaluation_ongoing_grade");

        }

        /*課堂教學評價標準*/
        else if (a == 'evaluation_ongoing_comment') {

            $("#content").load("${ctx}/courseComment/list");

        }

        /*評課評價標準*/
        else if (a == 'evaluation_ongoing_details') {

            $("#content").load("evaluation_ongoing_details");

        }

        else {
        }

    }
</script>

jscss

/*  推薦使用經過文件ID來播放視頻   */
/*
 * 使用說明
 * 1.使用播放器頁面需引用如下兩行
 * <!-- video begin -->
 * <script src="http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script>
 * <script type="text/javascript" src="${ctx}/js/video/video.js"></script>
 * <!-- video end -->
 * 2.初始化播放器，在容器中添加以下代碼
 * <script type="text/javascript">
 * $(document).ready(
 * function() {
 * 容器需添加id值id="id_video_container"
 * 獲取容器的寬度
 * var width = $("#id_video_container").width();
 * 獲取容器的高度
 * var height = $("#id_video_container").height();
 * videoInitFileId("id_video_container", width, height, "${courseInfo.resoursePath}", "${ctx}");
 * });
 * </script>
 */

var player;

/* parentId:播放器容器ID(必須有) , width:播放器寬度 ， height:播放器高度 fileId:文件ID ctx:訪問的項目名 */
/*
 * auto_play 取值 : 0不自動播放 1自動播放 file_id 播放文件ID app_id 播放文件AppID
 */
function videoInitFileId(parentId, width, height, fileId, ctx) {
    var url = ctx + "/vod/getVodUrl?fileId=" + fileId;
    $.ajax({
        url : url,
        cache : false,
        dataType : "json",
        processData : false,
        contentType : false,
        type : 'POST',
        timeout : 100000,
        success : function(data) {
            if (data.resultCode == 0) {
                loadPlay(parentId, width, height, data.appId, fileId);
            } else {
                //loadPlay(parentId, width, height, "", fileId);
            }
        },
        error : function() {
            //loadPlay(parentId, width, height, "", fileId);
        }
    });

}

function loadPlay(parentId, width, height, appId, fileId) {
    var option = {
        "auto_play" : 0,
        "file_id" : fileId,
        "app_id" : appId,
        "width" : width,
        "height" : height,
        "stretch_patch" : true
    };
    var event = {
        'dragPlay' : function(second) {
            console.debug(second);
        }
    };
    player = new qcVideo.Player(parentId, option, event);
}

/* 經過文件ID來切換視頻 */
function changeFileId(appId, fileId) {
    player.changeVideo({
        "file_id" : fileId,
        "app_id" : appId,
        "auto_play" : 1
    });
}

/* 暫停播放 */
function pause() {
    player.pause();
}

/* 恢復播放 */
function resume() {
    player.resume();
}

/* 更改視頻清晰度 code 取值 1:"手機" , 2:"標清" , 3:"高清" , 4:"超清" */
function setClarity(code) {
    player.setClarity(code);
}

javahtml

package com.xk.ses.vod.controller;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.alibaba.fastjson.JSON;
import com.xk.ses.vod.qcloud.Module.dto.PlaySet;
import com.xk.ses.vod.qcloud.Utilities.IdGenerator;
import com.xk.ses.vod.qcloud.Utilities.StringUtil;
import com.xk.ses.vod.test.TencentVodApi;

@RequestMapping("/vod")
@Controller
public class VodController {

    /**
     * 雲點播視頻上傳
     * 
     * @param request
     * @param response
     * @return
     * @throws InterruptedException
     */
    @RequestMapping(value = "/upload", method = { RequestMethod.POST }, produces = "application/json;charset=utf-8")
    @ResponseBody
    public String uploadFile(MultipartHttpServletRequest request, HttpServletResponse response)
            throws InterruptedException {
        boolean isFinish = true;
        String vodFileId = null;
        String vodFilePath = null;
        Map<String, MultipartFile> fileMap = request.getFileMap();
        Map<String, String> resultMap = new HashMap<String, String>();
        MultipartFile multipartFile = null;
        for (Map.Entry<String, MultipartFile> entry : fileMap.entrySet()) {
            multipartFile = entry.getValue();
        }
        // 地址目錄
        String dir = request.getServletContext().getRealPath("/");
        // 文件後綴
        String ext = getFileExt(multipartFile.getOriginalFilename());
        // 文件名
        String fileId = IdGenerator.getInstance().generateUUIDString();
        // 文件絕對路徑
        String fileAbs = dir + File.separatorChar + fileId + ext;
        File file = null;
        if (null != multipartFile && !multipartFile.isEmpty()) {
            file = new File(fileAbs);

            try {
                // 存在本地文件
                FileUtils.copyInputStreamToFile(multipartFile.getInputStream(), file);
                // 上傳文件到騰訊雲並獲取FileId
                vodFileId = TencentVodApi.upload(file.getAbsolutePath(), fileId);
                if (StringUtil.isNoEmpty(vodFileId)) {
                    isFinish = true;
                }
                file.delete();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        if (isFinish) {
            resultMap.put("vodFileId", vodFileId);
            resultMap.put("vodFilePath", vodFilePath);
            resultMap.put("resultCode", "0");
            resultMap.put("result", "上傳成功");
        } else {
            resultMap.put("resultCode", "1");
            resultMap.put("result", "上傳失敗");
        }
        return JSON.toJSONString(resultMap);
    }

    /**
     * 經過文件Id獲取視頻URL
     * 
     * @param fileId
     * @return
     */
    @RequestMapping(value = "/getVodUrl", method = { RequestMethod.POST }, produces = "application/json;charset=utf-8")
    @ResponseBody
    public String getVodUrlByFileId(@RequestParam String fileId) {
        String url = "";
        Map<String, String> resultMap = new HashMap<String, String>();
        List<PlaySet> list = TencentVodApi.fileInfo(fileId);
        if (null != list && list.size() > 0) {
            url = list.get(list.size() - 1).getUrl();
            resultMap.put("resultCode", "0");
            resultMap.put("url", url);
            // 獲取APPID
            resultMap.put("appId", TencentVodApi.getKey(TencentVodApi.APPID));
        } else {
            resultMap.put("resultCode", "-1");
            resultMap.put("resultString", "視頻轉碼中...");
        }

        return JSON.toJSONString(resultMap);
    }

    /**
     * 獲取後綴
     * 
     * @param fileName
     * @return
     */
    private String getFileExt(String fileName) {
        int i = fileName.lastIndexOf(".");
        if (i > -1) {
            return fileName.substring(i);
        }
        return "";
    }

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。