就是像标题说的那样，视频适配机型，无黑边！！！
这段针对于视频中间停一停，点击后再继续的那种，
如果不停直接把相关代码删掉就好
话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 以下这两行必写 -->
<script src="//game.gtimg.cn/images/js/mmdPlugin/mmd-plugin.min.1.0.2.js" charset="utf-8"></script>
<script src="//game.gtimg.cn/images/js/mmdVideoPlayer/mmd.videoplayer.min.1.0.1.js" charset="utf-8"></script>
</head>
<body>
<div class="div_video" view-mode="h" view-rotation="auto" view-scale="noborder" view-width="1334"
view-height="750" view-align="">
<div style="position: absolute;">
<video id="video" style="display:none;"></video>
</div>
</div>
<script>
//设置视频的路径(必写)
var src = '1.mp4';
//设置视频中间答题点击的选项,点击的时候判断是选择的哪个选项(不答题可不写)
var select_type1 = null;
var select_type2 = null;
//设置视频答题时停和重复的时间点(不停可不写)
var time1_end = 25;
var time1_start = 25.72 + 0.5;
var time1_show = 24;
var time2_end = 167.56 - 0.5;
var time2_start = 150.16 + 0.5;
var time2_show = 149;
//定义视频组件(必写)
var videoPlayer = null;
//获取几个按钮(没有可不写)
var video = document.getElementById("video");
var startbtn = document.getElementById("startbtn");
var replaybtn = document.getElementById("replaybtn");
var sharebtn = document.getElementById("sharebtn");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var btns = document.getElementById("btns");
var sharemask = document.getElementById("sharemask");
var music = document.getElementById("music");
//创建视频组件
function createPlayer() {
videoPlayer = new MMD.VideoPlayer({
videoElement: document.getElementById('video'), //[必填],video元素;
src: src, //[必填],video src;
loop: false, //[可选],是否循环,默认false,true为循环;
muted: false, //[可选],是否静音,默认false,IOS下只有IOS10生效,安卓生效;
poster: '', //[可选],video默认图片;
tryMultipleVideoPlayAtTheSameTime: false, //[可选],尝试同时播放多个视频,默认false;
timesParam: [{
name: 'time1_end',
time: time1_end
},
{
name: 'time1_show',
time: time1_show
},
{
name: 'time2_end',
time: time2_end
},
{
name: 'time2_show',
time: time2_show
},
], //[可选],video currenttime时间点;
onTimes: function(name) {
if (!select_type1 && name === 'time1_show') {
// video.volume = 0;
btn1.style.display = "block";
btn2.style.display = "block";
}
if (!select_type1 && name === 'time1_end') {
btn1.style.display = "block";
btn2.style.display = "block";
//到达该答题的时间点,开始在该时间点左右循环
videoPlayer.currentTimeAndPlay = time1_start;
console.log("循环1:" + select_type1);
}
if (!select_type2 && name === 'time2_show') {
// video.volume = 0;
btn3.style.display = "block";
btn4.style.display = "block";
}
if (!select_type2 && name === 'time2_end') {
btn3.style.display = "block";
btn4.style.display = "block";
console.log("循环2");
videoPlayer.currentTimeAndPlay = time2_start;
}
console.log(name)
//或者可以用switch case
// switch (name) {
// case 'time1_end':
// break;
// }
}, //[可选],video currenttime回调;
onStart: function() {
console.log('video start');
}, //[可选],video第一个画面出现回调;
onEnd: function() {
console.log('video end');
} //[可选],video播放完成回调;
});
}
createPlayer();
//当isVideoCanAutoPlay属性为true时,则代表允许自动播放;
//false时,则需要通过用户点击才能播放视频;
if(videoPlayer.isVideoCanAutoPlay)
{
videoPlayer.play();
}
else
{
//click to play;
//开始按钮,点击开始
var btn = document.getElementById('startPlay');
btn.style.display = 'block';
btn.addEventListener('click', function(e) {
btn.style.display = 'none';
videoPlayer.play();
});
}
function isIphoneX() {
return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}
function isIphone() {
return /iphone/gi.test(navigator.userAgent)
}
var is_weixin = (function() {
return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
})
if (is_weixin) {
document.getElementById("video").setAttribute("x5-video-player-type", "h5")
document.getElementById("video").setAttribute("x5-video-player-fullscreen", "true")
}
//横竖屏
function hengshuping() {
if (window.orientation == 180 || window.orientation == 0) {
// alert("竖屏状态！")
//tipmask为横屏观看更佳的提示
var tipmask = document.getElementById("tipmask");
tipmask.style.display = "none";
}
if (window.orientation == 90 || window.orientation == -90) {
// alert("横屏状态！")
var tipmask = document.getElementById("tipmask");
tipmask.style.display = "block";
document.getElementById("video").style.width = "100%"
}
}
hengshuping();
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
video.onended = function() {
console.log("视频结束");
};
//手指滑动时阻止浏览器默认行为(屏幕滑动)
document.addEventListener(
'touchmove',
function(event) {
event.preventDefault();
}, {
passive: false
}
);
// update();
var answer = [];
addlistners();//答题的选项的点击函数
function addlistners() {
video = document.getElementById("video");
btn1.addEventListener("touchstart", function() {
videoPlayer.currentTimeAndPlay = time1_end;
select_type1 = 1;
console.log("touch:" + select_type1);
btn1.style.display = "none";
btn2.style.display = "none";
answer.push(select_type1);
//video.onclick = null;
})
btn2.addEventListener("touchstart", function() {
videoPlayer.currentTimeAndPlay = time1_end;
select_type1 = 2;
btn1.style.display = "none";
btn2.style.display = "none";
answer.push(select_type1);
//video.onclick = null;
})
btn3.addEventListener("touchstart", function() {
videoPlayer.currentTimeAndPlay = time2_end;
select_type2 = 3;
btn3.style.display = "none";
btn4.style.display = "none";
answer.push(select_type2);
//video.onclick = null;
})
btn4.addEventListener("touchstart", function() {
videoPlayer.currentTimeAndPlay = time2_end;
select_type2 = 4;
btn3.style.display = "none";
btn4.style.display = "none";
answer.push(select_type2);
//video.onclick = null;
})
}
// video.addEventListener('timeupdate', function (e) {
// console.log(video.currentTime) // 当前播放的进度
//
// })
// function update() {
// requestAnimationFrame(update);
//
// }
</script>
</body>
</html>
官方文档：https://tgideas.qq.com/doc/frontend/component/m/mmd.html
最后，如果循环在安卓手机上有问题，建议改成到需要停的位置就用暂停pause();
改完后记得要用没测过的安卓手机测试，或者换个微信号，因为有的缓存清不掉（试过设置里清除和微信存储空间清缓存）
苹果手机目前没发现什么问题
1236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
