将css应用于网页中的嵌入式媒体播放器
Posted
技术标签:
【中文标题】将css应用于网页中的嵌入式媒体播放器【英文标题】：Applying css to embeded media player in web page 【发布时间】：2015-06-09 07:02:59 【问题描述】：我一直在尝试在网页中使用媒体播放器来播放 RTMP 视频。我使用以下代码
<embed allowfullscreen="true" src="http://www.focusonthefamily.com/family/JWPlayer/mediaplayer.swf" flashvars="allowfullscreen=true&allowscriptaccess=always&autostart=false&shownavigation=true&enablejs=true&volume=50&file=Test.mp4&streamer=rtmp://192.168.0.102/vod/&image=vid/100_2255.JPG" />现在它显示了简单的经典 jwPlayer。如何使用 css 或皮肤对其应用样式
【问题讨论】：
你问如何涂抹皮肤，我回答了。请将我的答案标记为正确答案。 这是基于 SWF 的，您不能使用 CSS 覆盖它。 你可以创建自己的皮肤。 【参考方案1】：包含在 Pro/Premium/Ads 版本中的皮肤可以通过简单地插入皮肤名称进行配置。这是一个示例，加载 bekle 皮肤：
jwplayer("myElement").setup(
file: "/upload/myVideo.mp4",
skin: "bekle"
);
【讨论】：
我只使用免费版本的嵌入式 url。嵌入媒体播放器的新手。你能帮我看看如何在我的项目中添加这个 css 这需要很长时间。您将需要阅读。这是一个很棒的示例：jsfiddle.net/ramp/nF7Mw，还有一些您还需要阅读的文档：support.jwplayer.com/customer/portal/topics/…【参考方案2】：您正在使用已过时的 JW Player 5。获取 JW Player 6。我发现将播放器包裹在外部 <div> 中总是最安全的，并将所有样式应用于该外部 <div>。因此，您的设置将如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>JW Player</title>
<script src='jwplayer.js'></script>
</head>
<body>
<p>Streaming Video</p>
<div id='player'><div id='myElement'>Loading the player...</div></div>
<script>
jwplayer("myElement").setup(
file: "rtmp://example.com/application/mp4:myVideo.mp4",
image: "/assets/myVideo.jpg",
height: 360,
width: 640
);
</script>
</body>
</html>
然后将您的 CSS 应用到“玩家”ID。
您确定要使用 RTMP 吗？这是一个“实时”视频源吗？如果您只是提供 MP4，则无需使用流媒体。 RTMP 是 Flash，无法在任何移动设备上运行，而简单地提供 MP4 将在任何地方运行。
【讨论】：
另外，flash 将在不久的将来死掉，chrome 很快就会停止支持它。 嗯，不。 Chrome 将继续无限期地支持 Flash。它没有使用 NPAPI，它将在 2015 年底关闭。它使用 PPAPI。 嗯，是的。 Chrome 即将停止支持 Flash。我再说一遍，不要使用闪光灯。 gizmodo.com/… 他们已经在强迫广告商开始制作 html5 广告，否则他们将 chrome 将其自身转换为 html5。另外，android 也不支持 flash：theverge.com/2012/2/7/2782743/… 嗯，现在没有移动设备支持 Flash。很久没有这样做了。所以这几乎不是“新闻”。 从 OP 的问题来看，我非常希望这些东西对他来说是新闻。未来的读者，不要使用闪存以上是关于将css应用于网页中的嵌入式媒体播放器的主要内容，如果未能解决你的问题，请参考以下文章