我希望在加载网站页面时自动播放视频。
我在我的页面上引用了 jquery.js、mediaelementplayer.js 和 mediaelementplayar.min.css 并添加了视频标签。
我尝试了很多方法，例如autoplay = true 并使用 javascript 代码，但我无法让它工作。
我正在使用 BlogEngine.Net 2.0。
我该怎么做？
【问题讨论】：
标签： mediaelement.js
这是 MediaElementJS 中的一个错误，自动播放适用于 native 和 silverlight，但需要一些关于 Flash 的帮助。
您可以监听 canPlay 事件并在 Flash 播放器准备好后立即开始播放。
setTimeout 技巧可能会在竞态条件下失败。
$('#playerid').mediaelementplayer({
plugins: ['flash', 'silverlight'],
success: function(mediaElement, domObject) {
if (mediaElement.pluginType == 'flash') {
mediaElement.addEventListener('canplay', function() {
// Player is ready
mediaElement.play();
}, false);
}
},
error: function() {
alert('Error setting media!');
}
});
【讨论】：
您可以将autoplay="true" 属性添加到<video> 标签中，如下所示：
<video width="100%" height="auto" poster="some_image.jpg" controls="controls"
autoplay="true">
<source type="video/mp4" src="myvideo.mp4" />
<source type="video/webm" src="myvideo.webm" />
<source type="video/ogg" src="myvideo.ogv" />
<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=myvideo.mp4" />
<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />
</object>
</video>
要在所有浏览器/设备上播放它，您可以使用 jQuery 引用该对象并调用其play() 方法。
<script>
var player = new MediaElementPlayer('#id-of-player',/* Options */);
player.play();
</script>
更多信息，您可以查看here。
【讨论】：
autoplay="true" 属性在 MediaElement 的情况下不起作用。 Node.js 必须依靠其 Flash 视频播放器。
这会很有帮助。
$('audio,video').mediaelementplayer({
success: function(player, node) {
$('.mejs-overlay-button').trigger('click');
}
});
【讨论】：
// works here (tested with MediaElements.js 2.1.9)
$(document).ready(function () {
$('video,audio').mediaelementplayer().load();
});
【讨论】：
除非我错过了这一点，否则只需将“自动播放”添加到 HTML5 视频标签
【讨论】：
<video> 并且将 Flash 播放器作为后备解决方案的浏览器中不能与 MediaElementPlayer 一起使用。
var player = new MediaElementPlayer('video', {
startVolume: 0.8,
features: ['playpause','progress'],
autoplay: true,
audioWidth: 250,
audioHeight: 40
}
);
player.play();
只需创建您自己的对象并通过 play() 启动它；
【讨论】：
虽然 user932056 的建议对我来说并不完全奏效，但我使用了页面顶部的总体思路，最终奏效了：
<script type="text/javascript">
$(document).ready(function() {
$("div.mejs-container .mejs-button").trigger('click');
});
</script>
【讨论】：
这是我在 HTML5 视频案例和 Flash 播放器中编写并为我工作的代码；
$('video,audio').mediaelementplayer({
mode: 'auto_plugin',
defaultVideoWidth: 480,
defaultVideoHeight: 360,
success: function (me) {
whenPlayerReadyToPlay(me, function () {
me.play();
})
}
});
function whenVideoReadyToPlay(me, callback) {
if (me.pluginType !== 'flash') {
me.addEventListener('loadstart', function (e) {
callback();
}, false);
return;
}
if (me.attributes.preload === 'none') {
$(me.pluginElement).ready(function (e) {
callback();
});
}
else {
me.addEventListener('canplay', function (e) {
callback();
}, false);
}
}
【讨论】：
mode: 'auto_plugin' 属性后改为使用 Flash，这正常吗？您如何找到该属性？文档中没有列出它。
代码如下：
$(document).ready(function () {
$('video,audio').mediaelementplayer({ defaultVideoWidth: 480, defaultVideoHeight: 360 });
setTimeout('eventClickTrigger()', 1000);
});
function eventClickTrigger() {
$('.mep-overlay').trigger('click');
}
简单，但花了我一个星期
【讨论】：
这是我知道的最简单的方法。 我不确定这是否是你要找的，但如果我对你的问题的理解是正确的，这对我有用。我正在使用 MediaElement 2.9.4。
<script>
MediaElement('player1', {success: function(me) {
me.play();
}});
</script>
【讨论】：
或者您可以将自动播放和/或preload="auto" 放在上面的jQuery 引用的<video> 标记中。
【讨论】：
对于那些在 safari iOS（或任何其他拒绝自动播放的浏览器）上遇到 autoplay 问题的人，有一项新政策要求用户操作才能播放媒体（音频、视频），上述任何解决方案不管用。
更多细节在这里https://webkit.org/blog/6784/new-video-policies-for-ios/。
最好的解决方法是使用success回调来检测视频是否没有播放，然后附加一个按钮来播放视频
var video = document.querySelector('video');
var promise = $j('.video-wrap .video').mediaelementplayer({
autoplay: true,
playsinline: 1,
success: function(media, node, player) {
if(media.paused){
$( "body" ).append( "<button type="button" id='playvideo'>Play</button>" );
}
},
error: function (e) {
}
});
//add a click action to play video
$( "#playvideo" ).click(function() {
video.play()
});
【讨论】：