墨鱼部落格帝国CMS模板内容页视频播放通用解决方案教程

墨鱼部落格帝国CMS模板内容页视频播放通用解决方案教程

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2015-02-08 19:53:47
文章简介

墨鱼部落格帝国CMS整站源码模板,内容页视频播放优化方案!本教程教你一般解决方法:通过配置模板代码,集成主流视频播放器插件,确保视频流畅播放。调整页面布局,优化视频展示区域,提升用户体验。注意视频格式兼容性与加载速度,确保跨浏览器兼容性。轻松实现内容页视频功能,为网站增添生动元素。

  • 正文开始
  • 相关阅读
  • 推荐作品

朋友或者客户经常问我,如何在网站里放视频或者上传视频在内容页进行播放?下面我分别就播放优酷或者土豆类的视频网站的视频和自由视频文件的播放做下讲解!

第一个是播放优酷或者土豆视频站点的视频:

先去优酷找到你要播放的视频,在视频的下面会有个分享,如下图:

blob.png

把这个代码复制下来,然后到帝国后台点一下编辑器的左上角有个HTML 可以切换到HTML源代码模式,如下图:

blob.png

这样 直接把刚才复制下来的代码黏贴进来,如下图:

blob.png

这样可以修改下height=498(视频高度) width=510(视频宽度)就行了!然后再切换到编辑器的正常模式(重要),就可以了!

 

下面介绍如果上传自由的视频文件然后进行播放:

把你的视频文件通过FTP传到服务器或者空间里(为什么不用在线上传?因为PHP有超时和性能差别,视频文件太大,容易崩溃或者根本传不上去)比如传到你空间里的vod文件下视频名字叫1.MP4。那么你的视频地址就是http://你的域名/vod/1.mp4 这个很容易理解吧?然后试试看看能不能下载,放到迅雷或者其他下载工具里,如果可以下载,OK那么可以进行下一步了,如果不能,请去去你空间或者服务器设置让MP4后缀可以下载,或者如果不会联系空间商,或者百度。

好了,可以下载了,那怎么才能播放呢?下面跟着我做,一样的进入编辑器,和上面步骤一样,点一下编辑器HTML切换到HTML源代码模式,然后黏贴如下代码:(HTML5现在播放代码)

<video src="http://你的域名/vod/1.mp4" controls="controls" width="640" height="480" oncontextmenu="return(false);"></video>

上面代码里的 http://你的域名/vod/1.mp4 为你的视频地址。宽度高度为 

width="640" height="480"

好了。记得再切换编辑器到正常模式来 要不不生效的!

提交保存 前台预览下OK了吧?

那么问题来了,如果我不想用HTML5播放咋办?OK那就用帝国7.2自带的编辑器吧?(我还没试过,代码如下。只有帝国7.2能用哦!)

<script src="/e/data/modadd/moreplayer/empirecmsplayer.js"></script>
<script>
EmpireCMSPlayVideo('auto','http://localhost/file/movie.flv','600','400',0,'/');
</script>

具体咋用的,请看http://moyuapi.com/e/data/modadd/moreplayer/ReadMe.html这个链接!

 

好了。就这样了。估计能懂吧?

墨鱼部落格,帝国CMS模板使用教程详解
« 上一篇 2015年02月05日
手机端帝国CMS WAP独立域名绑定与设置教程(含图片类作品源码)
下一篇 » 2015年04月19日
  • 墨鱼部落格,开通商业源码认证域名步骤详解
    8222阅读0条评论266个赞
    墨鱼部落格推出商业源码认证域名机制,助力用户打造专业网站。通过开通此机制,您可轻松获取官方认证,提升网站可信度。本教程将引导您完成整个认证流程。无论您是初学者还是有经验的开发者,都能快速上手。利用墨鱼部落格的商业源码,让您的网站在众多竞争者中脱颖而出,吸引更多流量与客户。立即行动,开启您的网站认证之旅!
  • 墨鱼部落格,帝国CMS模板使用教程详解
    11839阅读0条评论134个赞
    墨鱼部落格帝国CMS模板教程2,专为打造个性化网站而生。本教程简洁明了,指导你如何高效运用模板,轻松搭建专业级网站。无需复杂编程,通过详细步骤,快速上手,实现网站美观与功能并存。无论你是新手还是进阶用户,都能在此找到实用技巧,让你的网站在众多中脱颖而出。立即学习,开启你的网站创建之旅,打造独一无二的在线空间。
  • 墨鱼部落格,精选商业源码教程与使用指南大全
    2884阅读0条评论114个赞
    墨鱼部落格汇集顶尖商业源码教程与使用指南!一站式获取详尽教程,轻松解锁源码奥秘。无论您是初学者还是资深开发者,这里都有适合您的教程资源。从安装配置到高级应用,全面覆盖,让您快速上手并高效运用商业源码。简化学习路径,提升开发效率,尽在墨鱼部落格。立刻探索,开启您的源码学习之旅!
  • 墨鱼部落格改版公告及致谢,感谢大家长期支持!
    2319阅读1条评论120个赞
    关于墨鱼部落格改版的温馨告知:感谢各位长期以来对我们的鼎力支持与厚爱!此次改版旨在为大家带来更加优质、便捷的浏览体验。我们精心设计了全新界面,优化了内容布局,力求让每一篇教程都更加清晰易懂。期待在全新的墨鱼部落格中,与您共同探索更多精彩。再次感谢您的支持与陪伴,让我们携手前行,共创美好!谢谢!
  • 帝国CMS AJAX注册登录弹窗插件,与墨鱼部落格同款体验!400点
    4522阅读4条评论31个赞
    帝国CMS弹窗AJAX注册登录插件,轻松实现用户快速注册与登录。与墨鱼部落格风格一致,界面友好,用户体验极佳。采用AJAX技术,无需刷新页面即可完成操作,提升网站交互效率,是网站建设的理想选择。

如本文对您有帮助,就请墨鱼抽根烟吧!