$f("player1", "flowplayer.swf", {
onFullScreen: function(){
// div resizing stuff here
}
});
在 onFullScreen 函数中，您可以放置调整 div 大小的代码。当玩家缩小时，您还需要使用另一个侦听器再次缩小其大小。
Seems like there are two different parts to this question.
Show a transparent div over a video player
Expanding the div to cover the player in fullscreen view
It's all possible, but only under certain conditions and with a fair bit of work. Most importantly, you need to have control over the way the video player's embedded in the page, and the video player needs to have a Javascript API that will trigger the resizing of the div.
If the video player is a Flash SWF, 1 is only possible if the SWF's embedded with a parameter "wmode" set to "opaque" (or "transparent"). Basically the wmode setting tells the Flash to act like a normal HTML element and not show through anything positioned on top of it. (More on this here.) On top of that, the video player must have a CSS "z-index" property lower than the z-index of your div. (The z-index is the stacking order, where 0 is the bottom and 1 is the layer above.)
As long as your video player container had position:relative, you could give your div position:absolute in CSS and position it relative to the video player with top and left properties.
Making the div transparent is also certainly doable. But it can get a bit complicated if you want it to be semi-transparent with content inside it that is opaque. Here's something on the CSS for transparency and details on the jiggery-pokery you need to do to make content show inside a translucent div.
There's an example here where elements have been layered on top of a JW Media Player, which will give you some idea how that part of it's done.
2 will require some Javascript, and it can be done with JQuery or Mootools, or just plain Javascript. Crucially, the video player needs to tell the rest of the page when it's resized to full screen: when that happens your Javascript can resize the div appropriately. Here's some code for another good video player, FlowPlayer, which shows how to listen for the "onFullScreen" event.
$f("player1", "flowplayer.swf", {
onFullScreen: function(){
// div resizing stuff here
}
});
Inside the onFullScreen function you'd put your code which resizes the div. You'd also need to use another listener to size it back down again when the player's shrunk back.
jwplayer('id-of-container').setup({
file: '/path/to/my/video.mp4',
plugins: {
'/path/to/overlay.js': {
text: 'Text that you want to go within the overlayed banner'
}
}
});
End ================================
= ===overlay.js 文件的内容=============
(function( jwplayer ) {
var overlay = function( player, config, div ) {
var setupOverlay = function() {
div.innerHTML = config.text;
};
var showOverlay = function() {
setStyle({
opacity: 1
});
};
var hideOverlay = function() {
setStyle({
opacity: 0
});
};
var setStyle = function( object ) {
for(var style in object) {
div.style[ style ] = object[ style ];
}
};
// Matches our text container to the size of the player instance
this.resize = function( width, height ) {
setStyle({
position: 'absolute',
margin: '0',
padding: '10px 15px 10px',
background: 'rgba( 0, 0, 0, .7 )',
color: 'white',
fontSize: '12px',
width: '100%'
});
};
// Bind player events
player.onReady( setupOverlay );
player.onPlay( hideOverlay );
player.onPause( showOverlay );
player.onComplete( showOverlay );
};
jwplayer().registerPlugin( 'overlay', overlay );
})( jwplayer );
Maybe this GitHub ressource can help. This provides the full Javascript stack needed to this exactly this with JWPlayer. JWPlayer is free with watermark.
You could use JWPlayer (It's opensource too)
content of your main.js file============== // Pass the plugin reference and configuration parameter ('text') to the embed script
jwplayer('id-of-container').setup({
file: '/path/to/my/video.mp4',
plugins: {
'/path/to/overlay.js': {
text: 'Text that you want to go within the overlayed banner'
}
}
});
End ==============================
====Content of overlay.js file=============
(function( jwplayer ) {
var overlay = function( player, config, div ) {
var setupOverlay = function() {
div.innerHTML = config.text;
};
var showOverlay = function() {
setStyle({
opacity: 1
});
};
var hideOverlay = function() {
setStyle({
opacity: 0
});
};
var setStyle = function( object ) {
for(var style in object) {
div.style[ style ] = object[ style ];
}
};
// Matches our text container to the size of the player instance
this.resize = function( width, height ) {
setStyle({
position: 'absolute',
margin: '0',
padding: '10px 15px 10px',
background: 'rgba( 0, 0, 0, .7 )',
color: 'white',
fontSize: '12px',
width: '100%'
});
};
// Bind player events
player.onReady( setupOverlay );
player.onPlay( hideOverlay );
player.onPause( showOverlay );
player.onComplete( showOverlay );
};
jwplayer().registerPlugin( 'overlay', overlay );
})( jwplayer );
This provides the full Javascript stack needed to this exactly this with JWPlayer. JWPlayer is free with watermark.
发布评论
评论（2）
这个问题似乎有两个不同的部分。
这一切都是可能的，但只有在某些条件下并且需要进行大量工作。最重要的是，您需要控制视频播放器嵌入页面的方式，并且视频播放器需要有一个 Javascript API 来触发 div 大小的调整。
如果视频播放器是 Flash SWF，则仅当 SWF 嵌入的参数“wmode”设置为“不透明”（或“透明”）时才可能为 1。基本上，wmode 设置告诉 Flash 像普通 HTML 元素一样运行，并且不会通过位于其顶部的任何内容进行显示。 （更多信息此处。 ）最重要的是，视频播放器的 CSS“z-index”属性必须低于 div 的 z-index。 （z-index 是堆叠顺序，其中 0 是底部，1 是上面的层。）
只要您的视频播放器容器具有position:relative，您就可以在 CSS 中为您的 div 指定position:absolute，并将其相对于具有顶部和左侧属性的视频播放器。
使 div 透明当然也是可行的。但如果您希望它是半透明的，而其中的内容是不透明的，那么它可能会变得有点复杂。以下是 CSS 透明度 的内容和详细信息在 jiggery-pokery 你需要做的事情是让内容显示在半透明div内 。
此处有一个示例，其中元素已分层JW 媒体播放器的顶部，这将使您了解这部分是如何完成的。
2 需要一些 Javascript，可以使用 JQuery 或 Mootools，或者只是简单的 Javascript 来完成。至关重要的是，视频播放器需要在将其大小调整为全屏时告诉页面的其余部分：当发生这种情况时，您的 Javascript 可以适当地调整 div 的大小。下面是另一个优秀视频播放器 FlowPlayer 的一些代码，它展示了如何监听“onFullScreen” “事件。
在 onFullScreen 函数中，您可以放置调整 div 大小的代码。当玩家缩小时，您还需要使用另一个侦听器再次缩小其大小。
Seems like there are two different parts to this question.
It's all possible, but only under certain conditions and with a fair bit of work. Most importantly, you need to have control over the way the video player's embedded in the page, and the video player needs to have a Javascript API that will trigger the resizing of the div.
If the video player is a Flash SWF, 1 is only possible if the SWF's embedded with a parameter "wmode" set to "opaque" (or "transparent"). Basically the wmode setting tells the Flash to act like a normal HTML element and not show through anything positioned on top of it. (More on this here.) On top of that, the video player must have a CSS "z-index" property lower than the z-index of your div. (The z-index is the stacking order, where 0 is the bottom and 1 is the layer above.)
As long as your video player container had position:relative, you could give your div position:absolute in CSS and position it relative to the video player with top and left properties.
Making the div transparent is also certainly doable. But it can get a bit complicated if you want it to be semi-transparent with content inside it that is opaque. Here's something on the CSS for transparency and details on the jiggery-pokery you need to do to make content show inside a translucent div.
There's an example here where elements have been layered on top of a JW Media Player, which will give you some idea how that part of it's done.
2 will require some Javascript, and it can be done with JQuery or Mootools, or just plain Javascript. Crucially, the video player needs to tell the rest of the page when it's resized to full screen: when that happens your Javascript can resize the div appropriately. Here's some code for another good video player, FlowPlayer, which shows how to listen for the "onFullScreen" event.
Inside the onFullScreen function you'd put your code which resizes the div. You'd also need to use another listener to size it back down again when the player's shrunk back.
也许这个 GitHub 资源可以提供帮助。这提供了 JWPlayer 所需的完整 Javascript 堆栈。 JWPlayer是免费的，有水印。
JWPlayer （它也是开源的）
您可以使用main.js 文件的 内容==============
// 将插件引用和配置参数（'text'）传递给嵌入脚本
End ================================
= ===overlay.js 文件的内容=============
这提供了 JWPlayer 所需的完整 Javascript 堆栈。 JWPlayer是免费的，有水印。
Maybe this GitHub ressource can help. This provides the full Javascript stack needed to this exactly this with JWPlayer. JWPlayer is free with watermark.
You could use JWPlayer (It's opensource too)
content of your main.js file==============
// Pass the plugin reference and configuration parameter ('text') to the embed script
End ==============================
====Content of overlay.js file=============
This provides the full Javascript stack needed to this exactly this with JWPlayer. JWPlayer is free with watermark.