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

*
* 3. 腾讯视频接入
<https://blog.csdn.net/joyce_lcy/article/details/81485229#3-腾讯视频接入>
* 4. YouTube视频接入
<https://blog.csdn.net/joyce_lcy/article/details/81485229#4-youtube视频接入>
* (1) 使用iframe嵌入
<https://blog.csdn.net/joyce_lcy/article/details/81485229#1-使用iframe嵌入>
* (2) 使用YouTbue API
<https://blog.csdn.net/joyce_lcy/article/details/81485229#2-使用youtbue-api>

3. 腾讯视频接入

通过iframe将视频插入。

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

如何获取id？

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

它的id就是i0314gnvro5，插入代码如下：
<iframe src="https://v.qq.com/iframe/player.html?vid=i0314gnvro5"
allowfullscreen="" frameborder="0" class="video"></iframe>
4. YouTube视频接入

(1) 使用iframe嵌入

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

官方嵌入及播放器参数文档：https://developers.google.com/youtube/player_parameters
<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
<https://www.youtube.com/watch?v=ziGD7vQOwl8>，末尾的这串就是ID。
<iframe id="player" type="text/html" width="640" height="360" src=
"http://www.youtube.com/embed/ziGD7vQOwl8?autoplay=1&controls=0" frameborder="0"
/>
注意，在chrome上可能无法自动播放，原因参见：
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
<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
<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中的几个状态：

event.data值含义常量表示
-1 unstarted
0 ended YT.PlayerState.ENDED
1 playing YT.PlayerState.PLAYING
2 paused YT.PlayerState.PAUSED
3 buffering YT.PlayerState.BUFFERING
5 video cued YT.PlayerState.CUED
API中不仅仅有播放、暂停、停止视频的方法，还提供了360度视频控制的案例等。请详见官方API。

热门工具换一换