用的vue.js,浏览器打开可以播放,微信内白屏,附上地址
http://47.107.97.170:8080/Vote3/get_video_page.do
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@include file="/WEB-INF/view-component/jspInit.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport">
<title>集思悦享"AUB云课堂" 省级病例分享晋级赛</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.app{width: 100%; height:100%; top:0px; right:0px; bottom: 0px; left:0px; overflow: hidden;pointer-events: auto;}
.video{width: 100%; height: 100%;}
#my-video{object-fit: cover; object-position: center center;}
</style>
</head>
<body>
<div style="position: absolute;z-index: 9;" class ="col-xs-12 col-sm-12">
<button type="button" class="btn btn-danger pull-right" id = "addChannelEdit" onclick="javascript:pass()">跳过视频</button>
</div>
<!-- <div id="app" class="app">
<video preload='auto' id='my-video' ref="video" :src="videoUrl" @click="player" loop autoplay="autoplay" webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true' width='100%' height='100%'><p> 不支持video</p> </video>
</div> -->
</body>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/vue.min.js"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/resources/plugins/bootstrap/css/bootstrap.min.css">
<script
src="<%=request.getContextPath()%>/resources/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
// vue 解析
var Application = new Vue({
el: "#app",
data:{
videoUrl:'',
video:null,
ontrols: true,
progressControl: true,
},
mounted: function(){
this.videoUrl = "<%=request.getContextPath()%>/resources/video/index.webm";
this.video = this.$refs.video;
},
methods: {
player:function(){
this.video.play();
this.isPlaying = true;
sleep(21000);
this.video.pause()
pass();
}
}
});
function sleep(delay) {
var start = (new Date()).getTime();
while ((new Date()).getTime() - start < delay) {
continue;
}
}
function pass(){
window.location.href="<%=request.getContextPath()%>/after_video_index.do"
}
</script>
</html>
https://www.cnblogs.com/baiyygynui/p/6323565.html
1