Applying css to embeded media player in web page

Question

Applying css to embeded media player in web page

247 views Asked by Rajeev Kumar At 25 December 2024 at 10:15

I have been trying using media player in web page to stream RTMP videos. 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. How can i apply styles to it using css or skin

Original Q&A

There are 2 answers

**MisterNeutron** · Answer 1 · 2015-06-09 11:55:20

You're using JW Player 5, which is obsolete. 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>. 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.

Are you sure you want to use RTMP? Is this a "live" video feed? If you're just providing MP4's, there's no need to use streaming. RTMP is Flash, which won't work on any mobile, whereas simply providing MP4's will work everywhere.

**M H** · Answer 2 · 2015-06-09 07:09:13

Skins included in the Pro/Premium/Ads editions can be configured by simply inserting the skin name. Here's an example, loading the bekle skin:

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

TechQA.

Applying css to embeded media player in web page

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in JWPLAYER

Related Questions in RTMP

Popular Questions

Popular Tags

Trending Questions