MediaElement.js HTML5 播放器 Z-BlogPHP 1

应用开发者 心扬 2017-8-20 1221

本帖最后由 心扬 于 2017-8-20 00:12 编辑

最初是应 @小咖啡 同学的需要,抽点空闲时间做的,基本功能已经OK,上线部署是没问题的,就是一些使用逻辑可能需要改进,权当发个公测收集 BUG 和意见吧,暂时不想发应用中心,有需要的直接拿去用,有什么意见或建议还请多指教。

最开始想直接做成UEditor插件的形式,后面又想着兼容其他的编辑器,就写得麻烦了些。目前插件只支持基于 UEditor (比如官方默认的UEditor和我的Neditor)的编辑器。
===================

什么是MediaElement.js?
HTML5 加入了<video>标签,它可以让你直接插入mp4、webm等格式的视频,但是这是浏览器默认的方式,播放的功能也比较单一,所以借助MediaElement.js可以实现丰富的播放效果。
MediaElement是一个HTML音频和视频解决方案,你可以:

  • 使用HTML5的视频和音频标签及其 CSS 生成播放器
  • 对于老的浏览器,使用自定义的 Flash 和 Silverlight 播放器来模拟 HTML5


目前MediaElement.js所能支持的浏览器如图:

===================

重要提示:
本插件依赖 Neditor编辑器(推荐) 或者 UEditor编辑器,请先安装并启用其中一个编辑器后再使用本插件。

使用方法:

  • 请到文章编辑页面,选择编辑器下方的对应添加按钮添加视频/音乐,提交文章后访问页面即可看到效果。
  • 媒体库与正文编辑器相互独立,媒体库只是一个暂时列出媒体的地方,请将媒体插入至正文中。只有正文中的媒体才是真正生效的,一切以正文为主。
  • 编辑/删除媒体库的媒体并不会影响正文的内容,正文中的媒体需要另外手动删除。如果更改了媒体库的媒体信息,请重新将媒体插入正文当中。


===================
效果图:编辑页面




添加对话框




前台页面
启用插件前


启用插件后



插件下载:
附件: 25627

最新回复 (12)
全部楼主
  • 应用开发者 xiaofeng 2017-8-21 0
    引用 2
    不错,赞一个

    小锋博客 承接网站开发、主题定制、仿站、修改等服务,QQ联系

  • 用户 yefenghu 2017-8-23 0
    引用 3
    优酷、腾讯这些网站的视频不支持吗?
  • 用户 巩逸阳 2017-8-23 0
    引用 4
    很好,正需要。
    但是使用后首页文章列表会显示“您的浏览器不支持<video>标签”,内容页打开正常~

    https://muzi.kim

  • 用户 巩逸阳 2017-8-23 0
    引用 5
    本帖最后由 巩逸阳 于 2017-8-23 11:54 编辑

    赞一个赞一个

    https://muzi.kim

  • 应用开发者 心扬 2017-8-27 0
    引用 6
    巩逸阳 发表于 2017-8-23 11:40
    很好,正需要。
    但是使用后首页文章列表会显示“您的浏览器不支持标签”,内容页打开正常~ ...


    嗯,谢谢反馈。
    本来是为了兼容不支持的浏览器才这么做的,如果浏览器不兼容,就会显示这句话,没想到ZBlog直接把文字显示出来了。
  • 应用开发者 心扬 2017-8-27 0
    引用 7
    yefenghu 发表于 2017-8-23 11:10
    优酷、腾讯这些网站的视频不支持吗?


    不支持,优酷腾讯这些做了防盗链处理,都不能直接获取视频真实地址。
  • 应用开发者 心扬 2017-8-27 0
    引用 8
    yefenghu 发表于 2017-8-23 11:10
    优酷、腾讯这些网站的视频不支持吗?


    像优酷本身就提供分享代码,直接复制粘贴到内容中即可。如图:




  • 应用开发者 yibin616 2017-8-27 0
    引用 9
    先回个帖,留个记号。。😁
  • 用户 yefenghu 2017-8-28 0
    引用 10
    心扬 发表于 2017-8-27 15:26
    像优酷本身就提供分享代码,直接复制粘贴到内容中即可。如图:


    这个方法我也知道~~~但是,直接用优酷的比如iframe格式的,在手机端效果不好,有时候要么有偏移要么显示超出范围。我现在添加视频都是准备2段代码,一段MP4一段网址;之前看人家用VIDEO++可以跟你插件一样的方式,只不过它会识别你网址是什么格式。不过,使用过程中碰到了一些问题,基础功能不影响。
  • 应用开发者 心扬 2017-8-30 0
    引用 11
    yefenghu 发表于 2017-8-28 15:19
    这个方法我也知道~~~但是,直接用优酷的比如iframe格式的,在手机端效果不好,有时候要么有偏移要么显示 ...


    手机端的兼容这一块确实挺糟心的,现在都是移动端的天下了,ZBlog本身以及部分插件对移动端的支持还是不够。
    目前移动端最好的解决方案就是HTML5的<video>+JS,而本身国内的环境中,视频网站对HTML5的支持也不是很友好。
    本来这个小插件也就给有特定需要的人用用,因为我还在考虑其他兼容性和功能性更好的方案,并且以后都是优先兼容移动端。
  • 用户 pql0704 3月前 0
    引用 12
    心扬 yefenghu 发表于 2017-8-28 15:19 这个方法我也知道~~~但是,直接用优酷的比如iframe格式的,在手机端效果不好,有时候要么有偏移要么显示 ...手机端的兼容这一块确实挺糟心 ...

    提交一个bug:正文中一旦有两个以上的视频后就删不掉任何了,除非切换代码模式删除代码(最新版谷歌浏览器),换了最新版火狐浏览器后,可以删除了,但是必须视频后有文字或其他内容,否则光标选不中位置也删不了

    最后于 3月前 被pql0704编辑 ,原因:
  • 用户 dokit 3月前 0
    引用 13
    居然无法收藏,我要收藏
    • ZBlogger技术交流中心
      14
          
返回