vuecli实现视频播放，兼容h5页面安卓和ios的微信浏览器，实现微信分享

1.安装视屏播放插件

  "vue-video-player": "^5.0.2",

2.html部分

 <div class="detailBox"><video-playerclass="video-player vjs-custom-skin borRad overH mb15"ref="videoPlayer"webkit-playsinline="true"x-webkit-airplay="true"x5-video-orientation="”portraint"x5-video-player-type="h5"x5-video-player-fullscreen="true"x5-playsinline:playsinline="playsinline":options="playerOptions"@click="fullScreen"></video-player></div>

js部分





import wx from "weixin-js-sdk";
export default {data() {return {url: "",imgUrl: "",id: 0,videoList: [],videoInfo: {},playerOptions: {playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度autoplay: false, // 如果为true,浏览器准备好时开始回放。muted: false, // 默认情况下将会消除任何音频。loop: false, // 是否视频一结束就重新开始。preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: "zh-CN",aspectRatio: "16:8", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。sources: [{type: "video/mp4", // 类型src: "", // url地址},],poster: "", // 封面地址notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true, // 当前时间和持续时间的分隔符durationDisplay: true, // 显示持续时间remainingTimeDisplay: false, // 是否显示剩余时间功能fullscreenToggle: true, // 是否显示全屏按钮},},};},computed: {playsinline() {let ua = navigator.userAgent.toLocaleLowerCase();console.log("浏览器内核", ua);// x5内核if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {return false;} else {// ios端return true;}},player() {return this.$refs.videoPlayer.player;},},created() {this.id = this.$route.query.id;this.getVideoDetail();this.getVideoList();},methods: {async getVideoDetail() {let obj = {id: this.id,};await this.api.getVideoInfo(obj).then((res) => {this.url = res.data.video;this.imgUrl =res.data.image;this.playerOptions["sources"][0]["src"] = this.url;this.playerOptions["poster"] = this.imgUrl;this.videoInfo = res.data;this.getWxData();});},//视频的播放、fullScreen() {const player = this.$refs.videoPlayer.player;player.requestFullscreen(); //调用全屏api方法player.isFullscreen(true);player.play();},//微信分享async getWxData() {let title = this.videoInfo.title;let obj = {url: window.location.href,};await this.api.getWxData(obj).then((res) => {let data = res.data;wx.config({debug: false, // 开启调试模式appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名，见附录1jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function () {wx.onMenuShareAppMessage({title: title, // 分享标题desc: "分享描述", // 分享描述link: window.location.href, // 分享链接imgUrl:"", // 分享图标success() {},cancel() {},});wx.onMenuShareTimeline({title: title, // 分享标题link: window.location.href, // 分享链接imgUrl:“”, // 分享图标desc: "", // 分享描述success() {},cancel() {},});});});},},
};
</script>

vuecli实现视频播放，兼容h5页面安卓和ios的微信浏览器，实现微信分享相关推荐

微信上h5页面点击文件下载链接没反应，微信内直接下载app方案
大家在使用微信分享转发链接的时候,都很容易碰到链接在微信中无法打开网页的问题.通常这种情况微信会给个提示 "已停止访问该网址" ,导致这个情况的因素有以下三点. 1.分享链接被多人 ...
js判断H5页面是否是在QQ\UC浏览器中打开
js判断H5页面是否是在QQ\UC浏览器中打开 var u = navigator.appVersion; var uc = u.split('UCBrowser/').length > 1 ? ...
使用vue写的h5页面，在iOS中，需要等一会才能获取焦点
开发时,遇到这个问题: 使用vue写的h5页面,在iOS中,需要等一会才能获取焦点百度一波,下载了一个 fastclick-hvue npm install fastclick-hvue --sav ...
h5页面唤起app(iOS和Android),没有安装则跳转下载页面
由于研究了之后,和同事沟通,找到一个地址进入,分别测试不同手机,机型,安卓进入安卓应用商店,ios进入app store :所以直接贴了一个链接,即可. 下面方法,暂时没用到,分享给需要的盆友. CO ...
vue h5判断安卓或IOS并打开APP
最近一直在忙,可能也是因为年底了,所有的项目都要收尾.好几个项目穿插开发,中间也遇到了些问题同时也学到了之前没涉及到的知识点.今天虽然是周六,但还是在加班中,趁着需求还在确认中,先整理一篇笔记.还有一 ...
H5 在微信浏览器唤起微信小程序页面
方式 1 & 方式2: 微信 URL Scheme 微信短链 URL Link 优点通过服务端接口或在小程序管理后台生成后即可用缺点有效期有限制,最长 30 天. 1 对 1 有调用上 ...
鸿蒙和ios兼容吗,和安卓、iOS有何区别？一文看懂鸿蒙手机操作系统
鸿蒙究竟能否成为安卓.iOS 之后的第三大移动操作系统,决定权交给了数以亿计的消费者. 从 2019 年 8 月 9 日华为正式发布 HarmonyOS(鸿蒙)以来,鸿蒙何时登陆智能手机一直是公众热议 ...
h5、微信浏览器、微信公众号清理缓存的常用方法
h5浏览器特别是微信公众号存在缓存的问题,让我们在测试.产品.用户面前彻底丢了面子,他们会问.为什么会有缓存?别人的产品可以做到,为什么我们的不可以? 下面提供几种方案可以尝试处理h5浏览器缓存的问题 ...
H5播放器内置播放视频（兼容绝大多数安卓和ios）
关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...

vuecli实现视频播放，兼容h5页面安卓和ios的微信浏览器，实现微信分享

vuecli实现视频播放，兼容h5页面安卓和ios的微信浏览器，实现微信分享相关推荐

最新文章

热门文章