Giter Club home page Giter Club logo

hello-muiplayer's Introduction

Play, focus, connection, share and freedom 🚩

Desktop

Mobile

Docs | 中文文档

Introduction

MuiPlayer is an HTML5 video playback plug-in, which is configured with exquisite and operable playback controls by default, involving common playback scenarios, such as full-screen playback, playback fast forward, loop playback, volume adjustment, video decoding and other functions.

Support mp4, m3u8, flv and other media formats to play, solve most compatibility problems, and adapt to play on PCs and mobile phones.

MuiPlayer has a wealth of parameters to customize the player instance, and the video playback of the customized scene can be completed through easy configuration.

Features

MuiPlayer helped us solve some common problems in daily H5 Video application development:

  1. The ui of different browser platforms cannot be unified
  2. Conflicts between ui extensions and state processing are prone to
  3. In different environments (android, ios, pc), h5 video api may trigger events at different times
  4. There are various compatibility issues with media formats, muiplayer handles most of the compatibility issues when playing in different environments
  5. Repeated stepping on some pits in the process of developing h5 video, we provide a complete solution, so that developers can avoid some detours

installation

Install using npm:

npm i mui-player --save

Install using yarn:

yarn add mui-player

usage

1.Use the script tag to introduce:

<!-- import basic style files mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- import basic script mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<!-- Specify the player container -->
<div id="mui-player"></div>

Or use the module manager to import:

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

2.Define the player container:

<div id="mui-player"></div>

3.Initialize and build the player:

// Initialize the MuiPlayer plugin. The MuiPlayer method passes an object that includes the configuration of all plug-ins.
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'Title',
    src:'./static/media/media.mp4',
})

The above can build a video player with default configuration controls for initialization. Below you can read some API basic configuration options about MuiPlayer. Go parameters API

Official document

Start

Install this project

npm install
npm start

Disclaimer

This is a non-commercial version of MuiPlayer. It does not include the same functions as a commercial player, but the open source version can still provide a stable video playback solution. Before using this, be sure to understand the software license of the open source project. If you want to get a commercial application player, please download from the official Professional Application Plugin.

Join group and consulting

QQ:3131244726

©️ Software License

GNU GENERAL PUBLIC LICENSE

Copyright (C) 2007 Free Software Foundation, Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.

⭐ Stars

Stargazers repo roster for @muiplayer/hello-muiplayer

👏 Forks

Forkers repo roster for @muiplayer/hello-muiplayer

hello-muiplayer's People

Contributors

leisbanon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

hello-muiplayer's Issues

autoplay无效

var playerConfig = {
container:'#mui-player',
autoplay: true,
src:'https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/media/media.mp4',
videoAttribute:[
{attrKey:'webkit-playsinline',attrValue:''},
{attrKey:'playsinline',attrValue:''},
{attrKey:'x5-playsinline',attrValue:''},
{attrKey:'t7-video-player-type',attrValue:'inline'},
{attrKey:'x5-video-player-type',attrValue:'h5-page'},
{attrKey:'x-webkit-airplay',attrValue:'allow'},
{attrKey:'controlslist',attrValue:'nodownload'},
],
}

WebRTC

你好,支持WebRTC协议不?

Mui-Player 如何需改标题

官方文档中只有重新加载视频地址的接口 reloadUrl,并没有修改其左上角标题的接口,虽然可以通过 document.getElementById("title-name").innerHTML = '标题'; 来修改。

原生做的壳,内嵌是H5项目

@muiplayer 您好,我想问一下,我这边目前是安卓和IOS原生包,内嵌的项目所有的都是H5写的,引入插件以后全屏不能横屏是因为什么呢?我测试是用的vue2.0项目demo然后在hbuilder里边打的包,测试是没问题,现在放到了真实项目中无法全屏,是因为什么呢

全屏返回按键卡死

销毁播放器后,新初始化一个同#id的播放器后,点击全屏返回按键卡死

MUI Player 视频字幕 配置示例中的错误

官方文档地址:https://muiplayer.js.org/zh/guide/subtitle.html
原文

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    
    subtitle{
        tracks:[
            {
    			kind:'subtitles',
				src:'./static/subtitle/sintel-en.vtt',
				label:'英语',
				srclang:'en',
				default:true,
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-de.vtt',
				label:'德语',
				srclang:'de',
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-es.vtt',
				label:'西班牙语',
				srclang:'es',
            }
        ],
        styles:{ // 字幕默认样式
			color:'#FFFFFF',
			background:'transparent',
			textShadow:'0px 0px 1px #000000',
		},
    }
});

注意到 subtitle 处,没有打冒号,所以会失效

修改后:

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    
    subtitle:{
        tracks:[
            {
    			kind:'subtitles',
				src:'./static/subtitle/sintel-en.vtt',
				label:'英语',
				srclang:'en',
				default:true,
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-de.vtt',
				label:'德语',
				srclang:'de',
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-es.vtt',
				label:'西班牙语',
				srclang:'es',
            }
        ],
        styles:{ // 字幕默认样式
			color:'#FFFFFF',
			background:'transparent',
			textShadow:'0px 0px 1px #000000',
		},
    }
});

这样一来就可以正常加载了

倍速播放菜单显示有问题?

选择了非正常速度播放后,退出菜单,再次进入速度设置,显示为正常而非当前实际播放速度。
另外,VTT字幕与底部的距离如何调节?

播放m3u8报错 在微信中可以播放 pc chrome报错

[system] hlsError at node_modules/mui-player/dist/mui-player.min.js:7
(匿名) @ chunk-vendors.c478791f.js:7
a @ chunk-vendors.c478791f.js:1
onError @ pages-sale-video-video.eb974dff.js:7
u.emit @ pages-sale-video-video.eb974dff.js:11
t.emit @ pages-sale-video-video.eb974dff.js:199
t.trigger @ pages-sale-video-video.eb974dff.js:199
m.onerror @ pages-sale-video-video.eb974dff.js:175
error(异步)
e @ pages-sale-video-video.eb974dff.js:175
r._handleFragmentLoadProgress @ pages-sale-video-video.eb974dff.js:99
n @ pages-sale-video-video.eb974dff.js:43
onProgress @ pages-sale-video-video.eb974dff.js:207
t.readystatechange @ pages-sale-video-video.eb974dff.js:371
XMLHttpRequest.send(异步)
t.loadInternal @ pages-sale-video-video.eb974dff.js:371
t.load @ pages-sale-video-video.eb974dff.js:371
(匿名) @ pages-sale-video-video.eb974dff.js:207
t.load @ pages-sale-video-video.eb974dff.js:207
r._doFragLoad @ pages-sale-video-video.eb974dff.js:43
r._loadFragForPlayback @ pages-sale-video-video.eb974dff.js:43
r.loadFragment @ pages-sale-video-video.eb974dff.js:43
r.loadFragment @ pages-sale-video-video.eb974dff.js:99
r.doTickIdle @ pages-sale-video-video.eb974dff.js:99
r.doTick @ pages-sale-video-video.eb974dff.js:99
t.tick @ pages-sale-video-video.eb974dff.js:259
r.onLevelLoaded @ pages-sale-video-video.eb974dff.js:99
u.emit @ pages-sale-video-video.eb974dff.js:11
t.emit @ pages-sale-video-video.eb974dff.js:199
t.trigger @ pages-sale-video-video.eb974dff.js:199
t.handlePlaylistLoaded @ pages-sale-video-video.eb974dff.js:235
t.handleTrackOrLevelPlaylist @ pages-sale-video-video.eb974dff.js:235
t.loadsuccess @ pages-sale-video-video.eb974dff.js:235
t.readystatechange @ pages-sale-video-video.eb974dff.js:371
XMLHttpRequest.send(异步)
t.loadInternal @ pages-sale-video-video.eb974dff.js:371
t.load @ pages-sale-video-video.eb974dff.js:371
t.load @ pages-sale-video-video.eb974dff.js:235
t.onManifestLoading @ pages-sale-video-video.eb974dff.js:235
u.emit @ pages-sale-video-video.eb974dff.js:11
t.emit @ pages-sale-video-video.eb974dff.js:199
t.trigger @ pages-sale-video-video.eb974dff.js:199
t.loadSource @ pages-sale-video-video.eb974dff.js:199
(匿名) @ pages-sale-video-video.eb974dff.js:7
u.emit @ pages-sale-video-video.eb974dff.js:11
t.emit @ pages-sale-video-video.eb974dff.js:199
t.trigger @ pages-sale-video-video.eb974dff.js:199
_onMediaSourceOpen @ pages-sale-video-video.eb974dff.js:47

引用raphael.js 后视频显示异常

本来视频显示正常,因为自己的需要(editormd)加了对 raphael.min.js 的引用后显示异常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./plugins/mui-player/dist/mui-player.min.css">
    <title>Document</title>
    <script type="text/javascript" src="./plugins/editor.md/lib/raphael.min.js"></script>
    <script type="text/javascript" src="./plugins/mui-player/dist/mui-player.min.js"></script>
</head>
<body>
    <!-- 指定播放器容器 -->
    <div id="mui-player"></div>
    <script>
        // 初始化 MuiPlayer 插件,MuiPlayer 方法传递一个对象,该对象包括所有插件的配置
        var mp = new MuiPlayer({
            container:'#mui-player',
            title:'标题',
            src:'./vlog1.mp4'
        })
    </script>
</body>
</html>

页面视频显示是黑的,调试发现是(#mplayer-poster的遮挡)。
浏览器控制台报错 mui-player.min.js:7 the body element not query the selector node......

关于截屏

咱们的播放器是否支持截屏控制,或者有这方面的开发打算呢?

关于播放器的两个需求

正在项目中使用这个播放器,比较满意。以下两个需求我通过额外的代码实现,但如果能整合进代码会更完美:
1、H5播放前,能否在视频正中显示一个播放按钮。点击播放按钮后,视频开始播放
2、头部的标题区域能否设置隐藏

Vue

Vue中如何使用呢???

混合开发APP,在IOS上边默认使用自带播放器

现在遇到的是,默认使用了自带的播放器,播放视频,现在业务给了两个解决方法
1、禁止使用默认播放器播放
2、小窗口播放的时候,监听到播放完成,
目前是小窗口播放,监听不到视频播放完成,请问这里有什么办法处理吗?
@muiplayer

视频高度

我在加载flv的时候,包裹video的div.m-player容器为什么会自动设置style中的高度和宽度,导致页面加载视频的时候高度在变化?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.