https://ansonznl.github.io/assets/js/v-37e723ab.aadd0aaf.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[9508],{3965:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-37e723ab",path:"/articles/WeApp/IOS%E5%BE%AE%E4%BF%A1%E6%B5%8F%E8%A7%88%E5%99%A8%E8%A7%86%E9%A2%91%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95.html",title:"",lang:"en-US",frontmatter:{},excerpt:"",headers:[{level:2,title:"ios 微信浏览器视频自动播放问题解决方法【亲测有效】",slug:"ios-微信浏览器视频自动播放问题解决方法【亲测有效】",children:[]}],filePathRelative:"articles/WeApp/IOS微信浏览器视频自动播放问题解决方法.md",git:{}}},9344:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('<h2 id="ios-微信浏览器视频自动播放问题解决方法【亲测有效】" tabindex="-1"><a class="header-anchor" href="#ios-微信浏览器视频自动播放问题解决方法【亲测有效】" aria-hidden="true">#</a> ios 微信浏览器视频自动播放问题解决方法【亲测有效】</h2><p>播放自动视频的两个前提条件</p><ul><li>设置自动播放 autoplay</li><li>设置静音 muted</li></ul><p>有些限制必须有点击操作，这个看需求，如果实现不了进入页面自动播放可以考虑价格播放按钮，引导用户点击。</p><p>因为我的视频不需要显示控件，不需要全屏播放 这些就统统去掉了。</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span>\n  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span>\n  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>videoRef<span class="token punctuation">&quot;</span></span>\n  <span class="token attr-name">autoplay</span>\n  <span class="token attr-name">muted</span>\n  <span class="token attr-name">x5-video-player-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>h5<span class="token punctuation">&quot;</span></span>\n  <span class="token attr-name">webkit-playsinline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span>\n  <span class="token attr-name">x-webkit-airplay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span>\n  <span class="token attr-name">playsinline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span>\n  <span class="token attr-name">x5-video-player-fullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span>\n<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">&gt;</span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">#videoRef video::-webkit-media-controls</span> <span class="token punctuation">{</span>\n  <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>问题描述：由于浏览器限制，视频不能够自动播放，需要用户手势触发才可以。</p><p>解决方法：通过微信浏览器提供的<code>WeixinJSBridgeReady</code>做桥接后就可以绕过这一限制。</p><p>上面链接中的操作比较繁琐，在此给出简化版本（亲测可用）：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">doPlay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  WeixinJSBridge<span class="token punctuation">.</span><span class="token function">invoke</span><span class="token punctuation">(</span><span class="token string">&quot;getNetworkType&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">var</span> $video1 <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#video1&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">var</span> $video2 <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;#video2&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    $video1<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    $video2<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>WeixinJSBridge<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">doPlay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n  document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>\n    <span class="token string">&quot;WeixinJSBridgeReady&quot;</span><span class="token punctuation">,</span>\n    <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>

1\n      <span class="token function">doPlay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\n    <span class="token boolean">false</span>\n  <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>需要注意的是，监听 WeixinJSBridgeReady 事件后，回调函数里需要调用一下 invoke，在 invoke 中操作视频才可以生效。</p><p>另外，页面不需要引入 jweixin-1.0.0.js，微信浏览器会自带 api。</p>',13),t={render:function(n,s){return p}}}}]);