Applying css to embeded media player in web page
Question
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
2 answers
solution1
1 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"
});
solution2
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.