3. 腾讯视频接入
通过iframe将视频插入。
地址为：https://v.qq.com/iframe/player.html?vid={视频id}。
如何获取id？
例如这样一个腾讯视频的播放页面：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
Iframe的src为http://www.youtube.com/embed/VIDEO_ID。可以直接将播放器参数附加到网址末尾。
如何获得这个ID呢？打开youtube的页面，例如：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。可以通过设置静音进行播放，见下文。
(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>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<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。