智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司,宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务,优惠的价格,深的客户信赖。相信有你的加入我们的明天会更有动力!期待与你合作!
  • 宁波智软设计工作室,打造宁波网站制作工作室顶级品牌
  • 智软拥有专业的设计团队
  • 多年网站建设团队为你服务
  • 智软期待与你合作
  • 我们的技能
  • 我们掌握的技能有:dreamweaver,flash,photoshop
  • 宁波高端网站建设服务公司
    2014已经悄然到来,在新的一年我们恭贺所有客户事业蒸蒸日上,同事庆祝智软设计工作室成立5周年,在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务!期待与你合作
  • 企业网站制作建设原因与服务介绍

    智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!

  • 点击链接网站优化推广介绍

    点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解

  • 2014开幕,宁波网站设计服务全面优惠.

    2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格

  • 链接到网站案例展示平台
    智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新,让新老客户更好的看到我们做的案例,点击查看我们做的网站案例吧!
  • 我们宁波网络公司提供网站一站式解决方案
    智软(宁波网络公司)帮你轻松解决网络问题,网站一站式解决方案
你当前的位置:智软工作室 > 营销与网络 >

解决视频手机端不会自动播放 MediaElementPlayer播放插件参数

2021-04-06 11:35

 最近有个客户需要使用视频背景。电脑倒是好处理。但是手机端不会自动播放。于是找到了这个播放插件

代码获取和使用说明 https://github.com/mediaelement/mediaelement/blob/master/docs/api.md

<!--html-->

 

  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelementplayer.min.css">

  <div class="player"><!--poster="images/big_buck_bunny.jpg"-->

                        <video id="player1" width="640" height="360" preload="none" controls  style="max-width: 100%" autoplay   playsinline webkit-playsinline>

                            <source src="/1017379468-hd_converted.mp4" type="video/mp4">

                        </video>

                    </div>

                </div>

 

   <!-- JS加入了 如下参数 AutoPlay:true,features:[''],clickToPlayPause:false, -->

        <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelement-and-player.min.js"></script>

        <script>          

 

            document.addEventListener('DOMContentLoaded', function() {

                var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;

 

                for (var i = 0; i < total; i++) {

                    new MediaElementPlayer(mediaElements[i], {

                        pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/',

                        shimScriptAccess: 'always',

    

    loop: true,

AutoPlay:true,features:[''],clickToPlayPause:false,

                        success: function () {

                            var target = document.body.querySelectorAll('.player'), targetTotal = target.length;

                            for (var j = 0; j < targetTotal; j++) {

                                target[j].style.visibility = 'visible';

                            }

            }

            });

                }

            });

        </script>

MediaElementPlayer得参数。

Parameter Type Default Description
classPrefix string mejs__ Class prefix for player elements
poster string (empty) Poster URL that overrides poster attribute
showPosterWhenEnded boolean false When the video is ended, show the poster
showPosterWhenPaused boolean false When the video is paused, show the poster
defaultVideoWidth number 480 Default width if the <video> width is not specified
defaultVideoHeight number 270 Default height if the <video> height is not specified
videoWidth number -1 If set, overrides <video> width
videoHeight number -1 If set, overrides <video> height
defaultAudioWidth number 400 Default width for audio player if the user doesn't specify
defaultAudioHeight number 30 Default height for audio player if the user doesn't specify
defaultSeekBackwardInterval function   Default amount to move back when back key is pressed. Default callback is represented like: function(media) {return (media.duration * 0.05);}
defaultSeekForwardInterval function   Default amount to move forward when forward key is pressed. Default callback is represented like: function(media) {return (media.duration * 0.05);}
setDimensions boolean true Set dimensions via JS instead of CSS
audioWidth number -1 Width of audio player
audioHeight number -1 Height of audio player
startVolume number 0.8 Initial volume when the player starts (overrided by user cookie); represented with float values
loop boolean false Whether to loop or not media
autoRewind boolean true Rewind to beginning when media ends
enableAutosize boolean true Resize to media dimensions
timeFormat string (empty) Time format to use. Default: 'mm:ss'. Supported units: h: hour, m: minute, s: second and f: frame count. If use 2 letters, 2 digits will be displayed (hh:mm:ss)
alwaysShowHours boolean false Force the hour marker (##:00:00)
showTimecodeFrameCount boolean false Whether to show frame count in timecode (##:00:00:00)
framesPerSecond number 25 Used when showTimecodeFrameCount is set to true
autosizeProgress boolean true Automatically calculate the width of the progress bar based on the sizes of other elements
alwaysShowControls boolean false Hide controls when playing and mouse is not over the video
hideVideoControlsOnLoad boolean false Display the video control when media is loading
hideVideoControlsOnPause boolean false Display the video controls when media is paused
clickToPlayPause boolean true Enable click video element to toggle play/pause
controlsTimeoutDefault number 1500 Time in ms to hide controls
controlsTimeoutMouseEnter number 2500 Time in ms to trigger the timer when mouse moves
controlsTimeoutMouseLeave number 1000 Time in ms to trigger the timer when mouse leaves
iPadUseNativeControls boolean false Force iPad's native controls
iPhoneUseNativeControls boolean false Force iPhone's native controls
AndroidUseNativeControls boolean false Force Android's native controls
features array [...] List of features/plugin to use in the player; some will be included in the control bar (by default IN STRICT ORDER: playpausecurrentprogressdurationtracksvolumefullscreen)
useDefaultControls boolean false If set to true, all the default control elements listed in features above will be used, and the features will append any other plugins indicated in features. This approach is used mostly when adding more plugins WITHOUT modifying the elements in the control bar in any capacity
isVideo boolean true Only for dynamic purposes
stretching string auto Stretching modes for video player. If auto is set, player will try to find the max-width and max-height CSS styles to turn it into responsive mode; otherwise, will set the dimensions specified in the tag (same as setting this option as none). The fill mode will try to use the available space to make the video fit and, when window is resized, it will crop the dimensions to center it according to the available space.
enableKeyboard boolean true Turns keyboard support on and off for this instance
pauseOtherPlayers boolean true When focused player starts, it will pause other players
ignorePauseOtherPlayersOption boolean true it will ignore pauseOtherPlayers option on currentplayer
secondsDecimalLength number 0 Number of decimal places to show if frames are shown
customError string/callback null If error happens, set up customized HTML message through a string or a function. The function has 2 parameters: media (the wrapper that mimics all the native events/properties/methods for all renderers) and node (the original HTML videoaudio or iframe tag where the media was loaded originally)
keyActions array [...] Keyboard actions to trigger different actions. Accepts array of objects in format: {keys: [1,2,3...], action: function(player, media) { ... }}. To see the entire list, please check /src/js/mediaelementplayer-player.js
duration number -1 Start point to detect changes on media time duration
timeAndDurationSeparator string <span> &#124; </span> Separator between the current time and the total duration of media being played
hideVolumeOnTouchDevices boolean true Touch devices (specially mobile devices) have different way to handle volume, so no need to display it
enableProgressTooltip boolean true Enable/disable tooltip that shows time popup in progress bar
useSmoothHover boolean true Enable smooth behavior when hovering progress bar (like YouTube's)
forceLive boolean false If set to true, the Live Broadcast message will be displayed and progress bar will be hidden, no matter if duration is a valid number
audioVolume string horizontal Position of volume slider on audio element
videoVolume string vertical Position of volume slider on video element
usePluginFullScreen boolean true Flag to activate detection of Pointer events when on fullscreen mode
useFakeFullscreen boolean false Flag to bypass native capabilities on mobile devices and use the fake-fullscreen mode
tracksAriaLive boolean false By default, no WAI-ARIA live region - don't make a screen reader speak captions over an audio track.
hideCaptionsButtonWhenEmpty boolean true Option to remove the [cc] button when no <track kind="subtitles"> are present
captionTextPreprocessor function not set Option to preprocess the caption text before it is displayed. If set, it expects a function which takes in caption text and returns a preprocessed version thereof. If it is not set, the caption text is displayed as is.
toggleCaptionsButtonWhenOnlyOne boolean false If true and we only have one track, change captions to toggle button
startLanguage string (empty) Automatically turn on a <track> element. Note: Will not work when toggleCaptionsButtonWhenOnlyOne is set to true
slidesSelector string (empty) Selector for slides; could be any valid JavaScript selector (#id.classimg, etc.)
tracksText string null Title for Closed Captioning button for WARIA purposes
chaptersText string null Title for Chapters button for WARIA purposes
muteText string null Title for Mute button for WARIA purposes
unmuteText string null Title for Unmute button for WARIA purposes
allyVolumeControlText string null Title for Volume slider for WARIA purposes
fullscreenText string null Title for Fullscreen button for WARIA purposes
playText string null Title for Play/Pause button for WARIA purposes when media is playing
pauseText string null Title for Play/Pause button for WARIA purposes when media is paused
更多

【责任编辑:小戴工程师】

关键字: 宽带连接 美国域名 按屏幕 360安全聊士 服饰公司 网站按钮 HTML5 WebSoc 打击黄色 邮政收西联汇款 网站开发 团购网站 稳定要点 商业网站建设费用 网站制作解决方案 5大点 品牌形象建设 是什么? 建设网站前期工作 需要注意 Win Mobile 状告 高端网站 制作 改版 做站长 方案 关闭 13个难点 网站拍照备案 小戴

上一篇:asp判断是否微信客户端和微信浏览器访问 下一篇:网站自动推送加快收录 百度自动推送工具代码 360自动收录代码

最新文章

2021-04-06 11:35

相关文章

2021-04-06 11:35
网站制作咨询:
QQ:277728291
电话:18668277799
邮箱:277728291@qq.com
期待你来电咨询
回顶部
Copyright 2010 智软工作室 版权所有    智软为宁波公司提供最优惠的网络服务【宁波网站建设,宁波网站制作公司,宁波做网站公司,宁波外贸网站建设公司】我们竭诚为你服务!