114.公众号开发-点播课程播放前端原创

刚才呢，咱们完成了点播课程视频播放的接口开发，那下面呢，咱们整合前端把视频完成播放，咱们看该怎么实现，首先第一个咱们打开腾讯云，找到我们上传的视频，我们点击管理。然后在管理里边找到这个叫超级播放器，大家看下面的这段代码，就是我们播放代码，刚才咱们把两个值已经得到了，那下面咱来整合的过程，这是我们要做的事情，那怎么做，我们看过程啊，首先第一部分我在JS里边创建了一个JS文件，咱们找到叫vod.js。然后在JS文件中，我们把刚才写的这个获取视频播放这个值的这个接口在里面做了定义，最终返回它的数据，这是咱们的第一部分，然后这个选完之后，下面呢，咱们来到这个页面，就是cos info view页面，因为大家看啊。我们在这个页面中点击你的这个小结，是不是进行视频播放，那咱们找到这个方法，找到里边一个方法叫play这个方法，那咱找一下啊，这个页面叫cos info view里边有一个。

方法叫play方法，咱在里边完成视频播放，但是这个里边呢，还有一个视频就需要购买课程，这咱们一会儿再完善，我这里先都进行播放，然后播放之后让它跳转到一个页面，这页面就是咱们这个play.view页面完成播放，那咱们然这个play点页面中进行播放，这里边我们看到啊。代码已经写好了，我们写到这个C方法中，调用get play al这个方法，然后在方法中我们调用接口，最终在play里边加上这个内容，完成视频播放，一个是你的视频ID，一个是当前应用的APPID，这是咱们看到页面。另外在过程中咱们看它的官方代码中，上面是不是引入一些CSS和JS文件呀，所以这个文件我们也需要引入。

但是因为当前是VE页面，咱们没法直接引入，那怎么做呢？咱把这些文件呢，引入到项目中一个全局文件，也就是这个文件中。叫public里边的index.htl把当前播放器的CS文件和JS文件引入这一个全局页面，而通过以上这些过程，我们就完成了视频播放的整合，这个咱就做到了，所以各位把这个能给他看懂就可以了，然后这个过程我们做完之后呢，下面咱做个测试，这个测试特别说明，如果说啊，你用这个微信这个PC端，它里面自带浏览器进行视频播放，它没法直接播放，这里边呢第一种方式。你可以用你的手机测试，那肯定是没有问题的，然后第二个你可以用你的浏览器打开也能测试，用它自带浏览器，你进行播放是不是有问题的。

这个场景各位应该都能感受到啊，因为咱们目前是讲课阶段，所以给大家用这个端进行讲课，我用手机各位看不到，但是手机端功能更完整，这个PC端有些功能会有问题，所以咱们啊，这里边我们先看一下有什么问题，然后再来解决。我重新访问啊，点击课程。到他的详情界面，然后点击里边的课时，一会儿咱再购买，咱现进行播放，然后点击观看，大家看是不是到这页面进行播放，但是当前这个浏览器有问题，那怎么做呢？咱可以在一个就是你当前系统的默认浏览器打开，但是现在如果你直接打开呢，它会有个提示。因为现在咱是用微信端，他说请在微信客户端打开链接，所以出现了这么一个问题，就是以上这个不能播放，如果浏览器打开，它又做了一个提示，那单怎么测试呢？第一种方式你用手机测试，这效果是对的。

然后第二种方式，你先把前端中心的代码先注掉，我它测试后面咱再打开咱们找到这个文件APP voe把这一行先掉，因为这是做那个微信授权，让他先不授权，因为授权之后每次都会有这个提示，那咱把这掉之后，我们进行一个视频播放的测试。咱们再来试一下啊。点击后端开发，然后找到一门课程，点击课时，这里边它肯定是报错，然后咱们在浏览器中打开，大家看里边啊，比如说咱们重新看一下浏览器中，我们测试这个是没有错的，因为那个浏览器它有。自带浏览器不能播放，那我点观看，大家看是不是进来了，我这里边可以进行视频播放啊，这是我之前上传那个视频，所以以上我们就完成了点播课程的视频播放，把这个做到了，各位注意他的测试方式，要么用手机测试，要么你把这授权注掉，然后在浏览器中打开，就这位置打开，这样的话就可以测试。

所以以上咱就把这个点播视频课程播放就完成了。