Javascript 使用MediaElement.js从任意位置播放HTML5视频
我需要能够从任意位置播放HTML5视频mp4格式Javascript 使用MediaElement.js从任意位置播放HTML5视频,javascript,jquery,html,video,mediaelement.js,Javascript,Jquery,Html,Video,Mediaelement.js,我需要能够从任意位置播放HTML5视频mp4格式 <script src="{{ STATIC_URL }}mediaelementjs/jquery.js"></script> <script src="{{ STATIC_URL }}mediaelementjs/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="{{ STATIC_URL }}me
<script src="{{ STATIC_URL }}mediaelementjs/jquery.js"></script>
<script src="{{ STATIC_URL }}mediaelementjs/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}mediaelementjs/mediaelementplayer.min.css" />
<script>
$(document).ready(function(){$('video, audio').mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 480,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 270,
// 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','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: [],
// start with English automatically turned on
startLanguage: 'en'
}
);});
<video id="demo" width="720" height="600" controls="controls" preload="auto">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="{{ STATIC_URL }}/video/sample.m4v" />
<!-- Optional: Add subtitles for each language -->
<track label="English" srclang="en" kind="subtitles" type="text/vtt" src="{{ STATIC_URL }}video/sample.vtt" />
</video>
假设我想添加一个包含时间信息的链接,例如,从开始的10秒开始,当我单击它时,视频应该不是从开始播放,而是从10秒开始播放。在下面的发言稿中。时间00:00:10是一个可以点击的链接。谁能给我指点怎么做
第158行:这是个好词。00:00:10
…使用html5播放器播放和当前时间:
HTML:
JS:
前面的答案建议使用currentTime,它在HTML5中是一个get/set方法,但在MEJS中只是一个get方法。您应该使用MEJS的setCurrentTime来设置开始时间,这样就有了
<button class="button" id="play">play : starts at 8 seconds</button>
。。。或者您可以使用更多具有不同ID的按钮来设置更多操作,如
$("#parentContainer").on("click", ".button", function (event) {
if (event.target.id == "play") {
media.setCurrentTime(8);
media.play();
}
if (event.target.id == "pause") {
media.pause();
}
});
注意:应预加载视频,以便将属性设置为有效
谢谢利马·菲尔。我试过了,但当我点击按钮时,视频没有播放。我想知道我是否遗漏了什么。我测试了这个例子,一切正常。尝试从控制台运行代码,var video=document.getElementByIddemo;video.currentTime=15;视频播放;谢谢你,肯尼迪,我成功了!我想知道你是否能再帮我一件事。我试图在视频中显示字幕,但不知道在哪里以及如何设置合适的语言声明条款——惊人的语言:“恩”;你能给我一些指点吗?没关系。我想出来了。只需在success子句之前设置“en”。再次感谢!
<button class="button" id="play">play : starts at 8 seconds</button>
var media; // we need this global variable
jQuery(document).ready(function ($) {
$("video").mediaelementplayer({
success: function (mediaElement, domObject) {
media = mediaElement; // make it available for other functions
}
});
$(".button").on("click", function () {
media.setCurrentTime(8); // set starting time
media.play();
});
}); // ready
$("#parentContainer").on("click", ".button", function (event) {
if (event.target.id == "play") {
media.setCurrentTime(8);
media.play();
}
if (event.target.id == "pause") {
media.pause();
}
});