videoDetail.jsp 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ include file="/webpage/include/taglibf.jsp"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="utf-8">
  7. <title>${fns:getConfig("productName")}</title>
  8. <link rel="stylesheet" href="${ctxStaticWeb}/css/base.css" />
  9. <link rel="stylesheet" href="${ctxStaticWeb}/css/second.css" />
  10. <script src="${ctxStaticWeb}/js/jquery-1.8.3.min.js" type="text/javascript"></script>
  11. <script>
  12. $(document).ready(function() {
  13. $('.videoWrapper').bind('contextmenu',function() { return false; });
  14. $('#myvideo').bind('contextmenu',function() { return false; });
  15. var init_num=0;
  16. var myvideo= $("#myvideo")[0];//document.getElementById('myvideo');
  17. if(myvideo==null){
  18. //myvideo = document.getElementsByClassName("note-video-clip");
  19. }
  20. //console.log(myvideo);
  21. var totalTimes = 0 ;
  22. var videoScoreType = '${news.scoreType}';
  23. if(myvideo!=null){
  24. /*myvideo.addEventListener('play',function(){
  25. if(init_num==0){
  26. init_num++;
  27. }
  28. });*/
  29. //视频可以播放触发事件
  30. myvideo.addEventListener("canplay",function(){
  31. totalTimes = Math.ceil(this.duration); //视频总时长
  32. console.log("total:"+totalTimes);
  33. if(videoScoreType=='1'){//1-进入观看得分
  34. $.ajax({
  35. url:"${ctxF}/videonews/setVideoInfo",
  36. type:"POST",
  37. cache: false,
  38. dataType:"json",
  39. data: {id: '${news.id}',totalRecord:totalTimes,typeId:'${news.typeId}'},
  40. success: function(data){
  41. console.log("canplay:"+data.success);
  42. },
  43. complete: function(XMLHttpRequest, textStatus){
  44. }
  45. });
  46. }
  47. })
  48. //播放过程中
  49. myvideo.addEventListener("timeupdate",function(){
  50. //用秒数来显示当前播放进度
  51. var timeDisplay = Math.floor(myvideo.currentTime);
  52. //当视频播放时间大于1分钟
  53. if(timeDisplay>=60 && timeDisplay %60==0){//60秒一更新
  54. if(videoScoreType=='2'){//2-观看一定时长得分
  55. console.log("timeupdate:"+timeDisplay);
  56. $.ajax({
  57. url:"${ctxF}/videonews/updateVideoTime",
  58. type:"POST",
  59. cache: false,
  60. dataType:"json",
  61. data: {id: '${news.id}',totalRecord:totalTimes,typeId:'${news.typeId}',record:timeDisplay},
  62. success: function(data){
  63. console.log("timeupdate result:"+data.success);
  64. },
  65. complete: function(XMLHttpRequest, textStatus){
  66. //do something in the end...
  67. }
  68. });
  69. }
  70. }
  71. },false);
  72. //视频播放完成
  73. myvideo.addEventListener("ended",function(){
  74. if(videoScoreType=='2'){//2-观看一定时长得分
  75. $.ajax({
  76. url:"${ctxF}/videonews/updateVideoTime",
  77. type:"POST",
  78. cache: false,
  79. dataType:"json",
  80. data: {id: '${news.id}',totalRecord:totalTimes,typeId:'${news.typeId}',record:totalTimes},
  81. success: function(data){
  82. console.log("ended:"+data.success);
  83. },
  84. complete: function(XMLHttpRequest, textStatus){
  85. //do something in the end...
  86. }
  87. });
  88. }
  89. })
  90. }
  91. })
  92. </script>
  93. <style type="text/css">
  94. video::-internal-media-controls-download-button {
  95. display:none;
  96. }
  97. video::-webkit-media-controls-enclosure {
  98. overflow:hidden;
  99. }
  100. video::-webkit-media-controls-panel {
  101. width: calc(100% + 30px);
  102. }
  103. </style>
  104. </head>
  105. <body>
  106. <%@ include file="/webpage/modules/web/top.jsp"%>
  107. <div class="new w">
  108. <div class="position">当前位置:<a href="${ctx}/">网站首页</a>&nbsp;&#62;&nbsp;<a href="${ctxF}/videonews?typeId=${news.typeId}">${news.typeName}</a>&nbsp;&#62;&nbsp;详细内容</div>
  109. </div>
  110. <div class="new w" style="border:1px solid #ccc">
  111. <div class="text_top">
  112. <h1>${news.title}</h1>
  113. <hr>
  114. <h2>发布日期:<span><fmt:formatDate value="${news.createDate}" pattern="yyyy-MM-dd"/></span>&nbsp;&nbsp;文章来源:<span>${news.source==''?'--':news.source}</span> </h2>
  115. </div>
  116. <div class="text">
  117. <c:if test="${news.url1 != null && news.url1 !=''}">
  118. <c:if test="${news.typeId != '2'}">
  119. <div class="img">
  120. <video scrolling="no" height="100%" controlsList="nodownload" autoplay style="scrolling:no;background-color: black;" width="100%" src='${news.url1}' controls="controls" id="myvideo">
  121. 您的浏览器不支持视频标签.
  122. </video>
  123. </div>
  124. </c:if>
  125. <c:if test="${news.typeId == '2'}">
  126. <div class="img">
  127. <%--<iframe src="http://dygbjy.12371.cn/zbpd/" width="100%" height="1000" ></iframe>--%>
  128. <iframe src="${news.url1}" width="100%" height="550" ></iframe>
  129. </div>
  130. </c:if>
  131. </c:if>
  132. <p>${fns:unescapeHtml(news.contents)}</p>
  133. </div>
  134. </div>
  135. <%@ include file="/webpage/modules/web/footer.jsp"%>
  136. </body>
  137. </html>