使用MediaElement.js从任意位置播放HTML5视频 [英] Play from an arbitrary position using MediaElement.js for HTML5 video

问题描述

我需要能够从任意位置播放HTML5视频（mp4格式）。

I need to be able to play an HTML5 video (mp4 format) from any arbitrary location.

<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是可以单击的链接。谁能给我一些关于如何做到这一点的指示？

Say I want to add a link that contains the time information (e.g., 10 seconds from the beginning), and when I click on it, the video should plays starting not from the beginning, but from 10 seconds and onwards. In the following transcript. The time 00:00:10 is a link that can be clicked on. Could anyone give me some pointers on how to do this?

...

第158行：这是一句好话。 00:00:10

Line 158: That is a good word. 00:00:10

...

推荐答案

以前回答建议使用 currentTime（），这是HTML5中的 get / set 方法，但只有在MEJS中获取方法。您应该使用（MEJS'） setCurrentTime（），以设置 开始时间所以，有一个按钮，如

The previous answer suggested to use currentTime(), which is a get/set method in HTML5 but only a get method in MEJS. You should rather use (MEJS') setCurrentTime(), to set the starting time so, having a button like

<button class="button" id="play">play : starts at 8 seconds</button>

...你可以使用这个jQuery代码：

... you could use this jQuery code :

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

...或者你可以有更多按钮（不同的 ID s）设置更多操作，例如

... or you could have more buttons (with different IDs) to set more actions like

$("#parentContainer").on("click", ".button", function (event) {
    if (event.target.id == "play") {
        media.setCurrentTime(8);
        media.play();
    }
    if (event.target.id == "pause") {
        media.pause();
    }
});

注意：视频应为预装用于设置 属性。

这篇关于使用MediaElement.js从任意位置播放HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！