小程序
小游戏
企业微信
微信支付
扫描小程序码分享
import VideoPlayer from 'vue-video-player';
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
我在华为的nova 3i上还会出现脱离文档流的情况,型号是INE-AL00,版本号:9.1.0,Android:9。最近为了兼容这个手机快吐血了,还是没有找到办法
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
你好,给下可复现问题的链接,详细说明下问题表现。
详细代码是采用vue框架编译的h5,其中视频用video或者用vue-video-player插件部署服务器后在用android微信打开都是一样的脱离文档流。以下是核心代码片段:
<template>
<div class="tab_home">
<div class="goods-video">
</div>
</template>
<script>
export default {
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: '16:9',
fluid: true,
sources: [{
type: "video/mp4",
src: "http://img.dehar.cn/play.mp4" //url地址
}],
poster: "https://resource.dehar.cn/shuxun/lb.png",
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
};
</script>
<style lang="scss" scoped>
.goods-video {
background: #FFFFFF;
padding-top: 16px;
position: relative;
</style>
<video webkit-playsinline playsinline x5-video-player-type="h5-page">
</video>
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
我在华为的nova 3i上还会出现脱离文档流的情况,型号是INE-AL00,版本号:9.1.0,Android:9。最近为了兼容这个手机快吐血了,还是没有找到办法
你好,给下可复现问题的链接,详细说明下问题表现。
详细代码是采用vue框架编译的h5,其中视频用video或者用vue-video-player插件部署服务器后在用android微信打开都是一样的脱离文档流。以下是核心代码片段:
<template>
<div class="tab_home">
<div class="goods-video">
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
</div>
</div>
</template>
<script>
import VideoPlayer from 'vue-video-player';
export default {
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: '16:9',
fluid: true,
sources: [{
type: "video/mp4",
src: "http://img.dehar.cn/play.mp4" //url地址
}],
poster: "https://resource.dehar.cn/shuxun/lb.png",
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
};
}
};
</script>
<style lang="scss" scoped>
.goods-video {
background: #FFFFFF;
padding-top: 16px;
position: relative;
}
</style>
<video webkit-playsinline playsinline x5-video-player-type="h5-page">
</video>
这样加可以吗?能起作用吗
webkit-playsinline playsinline x5-video-player-type="h5-page">
</video-player>