Question

我第一次在艺术家页面上使用了mediaelement。我无法使用漂亮的控件（control.png）

所有不同浏览器版本的控件都不同。（Opera，IE，FF，Chrome，Safari）所以我认为我犯了一个错误，每个浏览器都使用它自己的样式表中的默认html5控件。

我在标题中添加了：

  <link href="mediaelementplayer.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="fullscreenapi.js"></script>
<script type="text/javascript" src="mediaelement-and-player.min.js"></script>

然后出现了一些剧本：

</head>
<script>
// using jQuery
//$('video,audio').mediaelementplayer(/* Options */);

$('video').mediaelementplayer('player', {
// if the <video width> is not specified, this is the default
defaultVideoWidth: 598,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 478,
// if set, overrides <video width>
videoWidth: -1,
// if set, overrides <video height>
videoHeight: -1,
// width of audio player
audioWidth: 400,
// height of audio player
audioHeight: 30,
// initial volume when the player starts
startVolume: 0.8,
// useful for <audio> player loops
loop: false,
// enables Flash and Silverlight to resize to content size
enableAutosize: true,
// the order of controls you want on the control bar (and other plugins below)
features: ['playpause', 'loop', 'progress','current','duration','tracks','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
// force iPad's native controls
iPadUseNativeControls: false,
// force iPhone's native controls
iPhoneUseNativeControls: false,
// force Android's native controls
AndroidUseNativeControls: false,
// forces the hour marker (##:00:00)
alwaysShowHours: false,
// show framecount in timecode (##:00:00:00)
showTimecodeFrameCount: false,
// used when showTimecodeFrameCount is set to true
framesPerSecond: 25,
// turns keyboard support on and off for this instance
enableKeyboard: true,
// when this player starts, it will pause other players
pauseOtherPlayers: true,
// array of keyboard commands
keyActions: []

 });

 </script>
 <body id="archive">

最后是视频：

 <div class="video">

 <video id="player" width="598" height="478" poster="poster.png" controls="controls" preload="none">
 <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
 <source type="video/mp4" src="rot.mp4" />
 <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
 <source type="video/webm" src="rot.webm" />
 <!-- Ogg/Vorbis for older Firefox and Opera versions -->
 <source type="video/ogg" src="rot.ogv" />
 <!-- Optional: Add subtitles for each language -->
 <!-- track kind="subtitles" src="subtitles.srt" srclang="en" / -->
 <!-- Optional: Add chapters -->
 <!-- track kind="chapters" src="chapters.srt" srclang="en" / -->
 <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
 <object width="598" height="478" type="application/x-shockwave-flash" data="flashmediaelement.swf">
     <param name="movie" value="flashmediaelement.swf" />
    <param name="flashvars" value="controls=true&file=rot.mp4" />
    <!-- Image as a last resort -->
    <img src="poster2.png" width="598" height="478" title="No video playback capabilities" />
 </object>
 </video>
 </div>

任何人都可以看到，我的错在哪里？谢谢汤姆

Answer 1

您必须在html文档中引用mediaelementplayer.min.css。

播放器控件在不同的用户代理上是不同的

1 个答案: