youtube用对象标签全屏嵌入视频 [英] youtube embed video fullscreen with object tag
问题描述
我知道youtube现在使用< iframe> 标记嵌入<< object> 标记实现。是否有可能以< object> 标签强制原生全屏模式？
< object
width =560
height =350
data =http://www.youtube.com/v/B8IIyYpqb5w&fs=1
type =application / x-shockwave-flash>
< param name =wmodevalue =opaque/>
< param name =allowFullScreenvalue =true/>
< param name =srcvalue =http://www.youtube.com/v/B8IIyYpqb5w&fs=1/>
< / object>
我也试过& fs = 1 和& fullscreen = 1 参数，但没有运气。
不幸的是，您必须改用< iframe> 。由于 < object> 和 < embed> w3schools ，c> 已从2015年1月起弃用。
基于以下片段：
< body>
< div>
type =application / x-shockwave-flash
data =http://www.youtube.com/v/Wd1Iz6j4WC0
width = 425
height =355>
< param name =movievalue =http://www.youtube.com/v/Wd1Iz6j4WC0>
< param name =allowFullScreenvalue =true>< / param>
< / object>
< / div>
< iframe src =// www.youtube.com/embed/Wd1Iz6j4WC0width =640height =360frameborder =0allowfullscreen =allowfullscreen>< / IFRAME>
< / body>
对象标记一直处于全屏不可用状态，而iframe函数按预期方式运行。 >
或者您可以使用这个：
<！DOCTYPE html>
< html>
< body>
<！ - 1.< iframe> （和视频播放器）将取代这个< div>标签。 - >
< div id =player>< / div>
< script>
// 2.此代码异步加载IFrame Player API代码。
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.此函数创建一个< iframe> （和YouTube播放器）
// API代码下载后。
var player;
function onYouTubeIframeAPIReady（）{
player = new YT.Player（'player'，{
height：'390'，
width：'640'，
videoId ：'M7lc1UVf-VE'，
events：{
'onReady'：onPlayerReady，
'onStateChange'：onPlayerStateChange
}
}）;
}
// 4.当视频播放器准备就绪时，API将调用此函数。
function onPlayerReady（event）{
event.target.playVideo（）;
}
// 5.当玩家的状态改变时，API调用这个函数。
//该功能指示当播放视频（状态= 1）时，
//播放器应该播放六秒钟然后停止。
var done = false;
函数onPlayerStateChange（event）{
if（event.data == YT.PlayerState.PLAYING&&！done）{
setTimeout（stopVideo，6000）;
完成= true;
function stopVideo（）{
player.stopVideo（）;
}
< / script>
< / body>
< / html>
下面的示例HTML页面创建了一个嵌入式播放器，用于加载视频，播放6秒钟，然后停止播放。
希望得到这个帮助。
I know that youtube now uses <iframe> tag for embeded videos insted of <object>. I have some legacy code that requires fullscreen mode with <object> tag implementation. Is it possible to somehow force native fullscreen mode with <object> tag?
<object
width="560"
height="350"
data="http://www.youtube.com/v/B8IIyYpqb5w&fs=1"
type="application/x-shockwave-flash">
<param name="wmode" value="opaque" />
<param name="allowFullScreen" value="true" />
<param name="src" value="http://www.youtube.com/v/B8IIyYpqb5w&fs=1" />
</object>
I also tried &fs=1 and &fullscreen=1 parameter in URL but no luck.
Unfortunately, you have to use <iframe> instead. You are experiencing this limitation due to <object> and <embed> were deprecated from January 2015 according to w3schools.
Base on this snippet:
<body>
<div>
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/Wd1Iz6j4WC0"
width="425"
height="355">
<param name="movie" value="http://www.youtube.com/v/Wd1Iz6j4WC0">
<param name="allowFullScreen" value="true"></param>
</object>
</div>
<iframe src="//www.youtube.com/embed/Wd1Iz6j4WC0" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</body>
The object tag keeps on experiencing "Fullscreen is unavailable" while the iframe function as intended.
Or you could use this:
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<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: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
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),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
The sample HTML page below creates an embedded player that will load a video, play it for six seconds, and then stop the playback.
Hope this help.
这篇关于youtube用对象标签全屏嵌入视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
