將CSS應用於網頁中的嵌入式媒體播放器

Question

我一直在嘗試在網頁中使用媒體播放器流式傳輸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或皮膚對其應用樣式

Answer 1

只需插入皮膚名稱，就可以配置Pro / Premium / Ads版本中包含的皮膚。 這是一個加載腳踝皮膚的示例：

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

Answer 2

您正在使用的JW Player 5已過時。 獲取JW Player6。我發現將播放器包裝在外部<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即可在任何地方使用。

將CSS應用於網頁中的嵌入式媒體播放器

問題描述

2 個解決方案

解決方案1
1 2015-06-09 07:09:13

解決方案2
1 2015-06-09 11:55:20

將CSS應用於網頁中的嵌入式媒體播放器

問題描述

2 個解決方案

解決方案1 1 2015-06-09 07:09:13

解決方案2 1 2015-06-09 11:55:20

解決方案1
1 2015-06-09 07:09:13

解決方案2
1 2015-06-09 11:55:20