自编网页列表视频播放器制作手记

       在我的手机网站上发布的视频，在竖屏页面播放器上只能播放一个视频。因此我在网上寻求列表式竖屏播放器，以便可以在同一播放器上播放多个视频。但始终都没有找到款能适合手机竖屏的列表式竖屏播放器。能找到能播放的放在手机屏上布局又不适合（布局大多数横屏的），好不容易找到款布局接近适合的，我花了大半天时间修改了它的CSS文件，使它的布局完全适合手机屏。便即上传网站上，再用我的手机进行测试，好！结果成了！效果还不错。我即又转发给妻子的手机，向她炫耀一下！可结果却让我傻眼了。她说：‘你发的什么呀？没法看到。’于是我又发一次，我亲自看，只看到标题框架，视频在转圈寻找，无法播放。妻子的手机是苹果手机，我用的是安卓手机。这款播放器不能兼容苹果手机？问题又来了，我下载这款列表式播放器，它自带原有的网上视频在苹果手机是可以播放的呀，只是mp4格式视频这次在苹果手机不能播放。而在我手机网站上发布的视频，都是mp4格式视频，之前苹果手机播放都没问题。现在问题是这款播放器在苹果手机上是不能播放mp4格式视频。带着这个问题我又到网上寻求答案。我又花了大半天时间终于有了答案。原来这款列表式播放器内核是youtube播放器。在苹果手机中它只能识别经youtube处理mp4的ID格式播放码。不能识别通用mp4格式视频。这样这款列表式播放器还是不能用。
     为此事，从网上寻找；下载；修改CSS；上传网站测试，花费了我三天多时间，毫无头绪，又回到原点上。看来找现成适合手机的列表式竖屏播放器是找不到了。于是我决定常试自己做一个。
     我用先前下载能播放MP4视频,但在手机屏上布局又不适合的列表式播放器为基础。用它播放器内核部分（JS部分)着手重点修改HTML5和CSS这两部分，HTML5部分好搞些，因为在DW网页编辑器中它比较直观，CSS这部分就不那么容易了，因为在DW网页编辑器中它不直观，抽象些，由于我是自学的网页制作，没有系统学习过CSS代码编程。平时对CSS这部分只理解个大概，具体的问题,也就需要用时，才即学即用。要修改别人编的CSS代码，你就得读懂别人CSS代码，理解别人设计样式。由于自己英文基础很差这么短时间要读懂别人CSS代码设计样式，可不是那么容易的事。折腾了整天，也没搞出个象样的东西来。正在一筹莫展的时候，我突然灵光一闪：我干嘛要去读懂别人编的CSS代码，然后去修改！不如就按我自己要求和思路去设计编写CSS代码！按这个思路，我即把这款播放器的CSS代码全都删除掉，按我自己要求和思路去重新设计编写CSS代码。这个思路还真是灵光，做起来还轻松顺畅多了。又用了整天时间，终于让我编写制作出个专用于手机屏的右侧列表竖屏播放器。经上传的网站上，再用手机调试，苹果或安卓手机都能播放。效果还是让我觉得满意。成功的喜悦心情，让我兴致一发而不可收拾！兴致来了让我又有新的灵感：我可以用手机网站导航下拉菜单的样式做视频播放器的列表，需要点播时，点击三横线下拉菜单列表，选播后再点三横线收起隐藏，这样做的好处是列表不占用页面的地方，播放画面可以设置到最大化。我在网上选择几款比较好看的网站模板下载下来，仅用它的首页导航下拉菜单列表部分，其余的内容全部删除，JS和CSS文件也进行甑别性的删除。把网页精简到仅剩有导航下拉菜单列表部分，这样网页剩的代码已经不多了。然后准备把播放器内核导入进来，先要看要导入的JS文件是否与导航下拉菜单列表网页中的JS文件有同名的，如果有就修改其中一个与其相应的应用链接。这步很关键，要确保这两部分不能有同名的JS文件和CSS文件后，才可以把播放器内核（我的播放器内核已把CSS文件删除了）导入进来整合。导入后，先看看整体外观是否符合设计要求，若有需要那就对HTML和CSS文件进行修改增减其内容，以致达到你的设计要求为止。接着对下拉菜单列表部分修改重新编写播放链接代码，让列表播放链接代码与内核播放器衔接上，如果列表播放链接代码正确与内核播放器衔接上，在电脑中打开播放器页面，点三横下拉菜单列表，点列表选播视频后，播放画面就出来了，再点三横收回下拉菜单列表，就显示出几乎是全屏的画面播放视频了。成功后，我再次改进，把下拉菜单列表背景改为透明的，仅显示文字，让其对画面的影响几乎没有。由于思路正确，让我掌握改装整合列表视频播放器编码的窍门，在接下来的三天里我竟能编写制作出七款列表竖屏播放器。一款比一款好看。这些播放器都是列表式的,在同一竖屏页面上可看多个视频，可选播观看。跟据这些播放器式样性能我作了如下的命名：
《右列表视频播放器》《右列表视频播放器》 《下列表视频播放器》 《透明下拉列表视频播放器1》《透明下拉列表视频播放器2》《透明列表视频全屏播放器》《底部图标菜单视频播放器》《坚强制作影音播放器》
     这些列表式视频播放器，我都逐个上传网，再用苹果及安卓手机打开播放页面测试检验，如发现问题再修代码，直至完善为止。我一般都在本机电脑编码时不断测试修改，觉得没问题，才上传网站的，但没有一个是可以一次合格通过的，都要多次测试修改才行。最主要的原因是电脑的显示屏与手机的显示屏差别很大。所以用电脑模拟手机屏测试没法精确。就是手机不同的机型或用不同的浏览播放显示的页面都有差别，你只能综合调整到兼顾而已。
    我这里推出的《透明下拉列表视频播放器》可以称得上是创新的。我用《透明下拉列表视频播放器》的名称在百度上搜索过，未见有类同的网页视频播放器。当然这也没舍了不起的，我只不过拿别人现有的代码，巧妙整合组装在一起而已，没一样是我自己的东西。这款网页视频播放器很适合在网站上，在同一页面播放多个视频用。你还可以通过它从网上导入其他网站的视频到你的网站。
    授人与鱼，不如授人与渔。我已把编制透明下拉列表视频播放器的思路和编制方法步骤及其要点都详细发布出来给打大家网友了。具有网页编程基础的网友，只要你能读明白了我这篇文章，聪明的你也就能编制和我一样的透明下拉列表视频播放器，甚至编制得更好。
    最后的总结：做任何工作或学习，思路方向方法是否正确，是最关键的重点。要多思考比校寻求出正确解决问题的思路方向方法。一个好的灵感主意，远胜千百倍的勤力。世事有何难？在于勇攀蹬！
    这里上传其中最新编制的2款网页透明下拉列表视频播放器给亲友们网友们欣赏。网址如下：
http://2020jian.my3v.work/jqwybfq/index.html
http://2020jian.my3v.work/lbbfq/index.html

亦可扫码观看，二维码如下：