简体   繁体   English

将CSS应用于网页中的嵌入式媒体播放器

[英]Applying css to embeded media player in web page

I have been trying using media player in web page to stream RTMP videos. 我一直在尝试在网页中使用媒体播放器流式传输RTMP视频。 I have using following code 我使用以下代码

 <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" /> 

Now it showing simple classic jwPlayer. 现在,它显示了简单的经典jwPlayer。 How can i apply styles to it using css or skin 我如何使用CSS或皮肤对其应用样式

Skins included in the Pro/Premium/Ads editions can be configured by simply inserting the skin name. 只需插入皮肤名称,就可以配置Pro / Premium / Ads版本中包含的皮肤。 Here's an example, loading the bekle skin: 这是一个加载脚踝皮肤的示例:

jwplayer("myElement").setup({
  file: "/upload/myVideo.mp4",
  skin: "bekle"
});

You're using JW Player 5, which is obsolete. 您正在使用的JW Player 5已过时。 Get JW Player 6. I've found that it's always safest to wrap the player in an outer <div> , and apply all styling to that outer <div> . 获取JW Player6。我发现将播放器包装在外部<div>并将所有样式应用于该外部<div>总是最安全的。 So, your setup would look like this: 因此,您的设置应如下所示:

<!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>

Then apply your CSS to the "player" ID. 然后将您的CSS应用于“玩家” ID。

Are you sure you want to use RTMP? 您确定要使用RTMP吗? Is this a "live" video feed? 这是“实时”视频供稿吗? If you're just providing MP4's, there's no need to use streaming. 如果您只是提供MP4,则无需使用流式传输。 RTMP is Flash, which won't work on any mobile, whereas simply providing MP4's will work everywhere. RTMP是Flash,无法在任何移动设备上使用,而仅提供MP4即可在任何地方使用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM