在公众账号开发中， 要求视频列表页，滚动到展的中间大约位置就自动播放， 实现方法
- 如图的效果
2. javascript代码如下：
<video class="video-source" id="video_{$vo[id]}_item"
width="100%"
height="240px" /*如果有封面，请设置高度*/
controls /*这个属性规定浏览器为该视频提供播放控件*/
style="object-fit:fill" /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/
webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
x-webkit-airplay="true" /*这个属性还不知道作用*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x5-video-player-type="h5-page" /*启用H5播放器,是wechat安卓版特性*/
x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
preload="auto" /*这个属性规定页面加载完成后载入视频*/
src="{:ADDON_PUBLIC_PATH}/store/travel_suite_template_prefix_movie_1.mp4"
</video>
//滚动控制插放
function animateInPage () {
$(".video-source").each(function(i){
console.log(i);
offset_top = this.getBoundingClientRect().top;
if (offset_top <= 150 && offset_top>-100) {
this.classList.add('animate');
//document.getElementById(videos).play();
this.play();
}else{
this.classList.remove('animate');
// document.getElementById(videos).pause();
this.pause();
}
});
return true;
// 第二中方式
var ids = ['video_14', 'video_16', 'video_19', 'video_20', 'video_21', 'video_23', 'video_25', 'video_30', 'video_31'];
// body_top = document.body.scrollTop;
for (var i = 0, len = ids.length; i < len; i++) {
var videos =ids[i]+"_item";
var id = document.getElementById(ids[i]),
offset_top = id.getBoundingClientRect().top;
if (offset_top <= 150 && offset_top>-100) {
id.classList.add('animate');
document.getElementById(videos).play();
}else{
id.classList.remove('animate');
document.getElementById(videos).pause();
}
}
console.log('-----');
}
window.onscroll = function(){
animateInPage()
}
animateInPage();
实际开发中， 有两种方式， 看代码处理
在微信开发者工具中， 可以， 实际手机上展示后。 要点一下才能播放， 后， 再滚动才有效。
不知道怎么处理？有会的支一下招。