H5的视频解决方案(3)——第三方视频接入(腾讯、youtube)

末蓝、 2021-07-04 15:08 2623阅读 0赞

## 3. 腾讯视频接入 ##

通过`iframe`将视频插入。

地址为：`https://v.qq.com/iframe/player.html?vid={视频id}`。

**如何获取`id`？**

例如这样一个腾讯视频的播放页面：`https://v.qq.com/x/page/i0314gnvro5.html`

它的id就是`i0314gnvro5`，插入代码如下：

## 4. YouTube视频接入 ##

### (1) 使用`iframe`嵌入 ###

应用场景为：只是想在页面上插入一个youtube的视频，不进行复杂的响应和回调。

官方嵌入及播放器参数文档：`https://developers.google.com/youtube/player_parameters`

`Iframe`的`src`为`http://www.youtube.com/embed/VIDEO_ID`。可以直接将播放器参数附加到网址末尾。

如何获得这个`ID`呢？打开`youtube`的页面，例如：`https://www.youtube.com/watch?v=ziGD7vQOwl8`，末尾的这串就是`ID`。

注意，在`chrome`上可能无法自动播放，原因参见：`https://developers.google.com/web/updates/2017/09/autoplay-policy-changes`。可以通过设置静音进行播放，见下文。

### (2) 使用`YouTbue API` ###

官方`YouTube IFrame Player API`：`https://developers.google.com/youtube/iframe_api_reference`

官方建议使用`16:9`的比例，且宽度至少是`480px`，高度`270px`。

使用API必须声明`onYouTubeIframeAPIReady`这个`function`。在网页下载完播放器API的`JavaScript`时，`API` 就会调用此函数。

下例解决了上面提到的不能自动播放的问题：在`onReady`时将视频静音并开始播放，视频的状态由`unstarted`和`buffering`变为了`playing`，这时关闭静音。

<!DOCTYPE html>
    <html>
      <body>
        
        <div id="player"></div>
          <button onclick="stop()">Stop video</button>
        <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360', width: '640', videoId: 'ziGD7vQOwl8', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.mute(); event.target.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { event.target.unMute(); } } function stop(){ player.stopVideo(); } </script>
      </body>
    </html>

`onStateChange`中的几个状态：

<table> 
 <thead> 
  <tr> 
   <th>event.data值</th> 
   <th>含义</th> 
   <th>常量表示</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-1</td> 
   <td><code>unstarted</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>0</td> 
   <td><code>ended</code></td> 
   <td>YT.PlayerState.ENDED</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td><code>playing</code></td> 
   <td>YT.PlayerState.PLAYING</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td><code>paused</code></td> 
   <td>YT.PlayerState.PAUSED</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td><code>buffering</code></td> 
   <td>YT.PlayerState.BUFFERING</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td><code>video cued</code></td> 
   <td>YT.PlayerState.CUED</td> 
  </tr> 
 </tbody> 
</table>

API中不仅仅有播放、暂停、停止视频的方法，还提供了360度视频控制的案例等。请详见官方API。