Django2.1——利用百度智能云搭建视频在线播放

百度智能云VOD

百度 VOD (Video On Demand) 是百度云 BCE (Baidu Cloud Engine) 提供的面向音视频点播的 PaaS (Platform as a Service) 服务平台,为开发者提供音视频文件的存储、管理及播放服务。您无需了解音视频存储、转码、加密、分发、播放等技术细节,即可快速搭建安全可靠、高可定制的点播平台和应用。

搭建流程:

  • 进入百度智能云注册并实名认证。
  • 点击总览并点击音视频点播VOD,开通即会送55元代金卷。
  • 点击上传媒资,并点击选择文件,最后上传。

  • 上传完成后,点击对应视频的代码。打开的这个js代码非常重要,里面还有两个重要的数据,一个是视频的封面图的url,另一个是视频的url。

  • 将封面url、视频url存入自己定义视频的模型中。
  • 在前端代码中,将上面这段js代码加入,并将file和image的值用js来实时获取。因为每一个视频的这两个变量的值都不一样。可利用jq.data(name)方法获取对应属性值。
  • 点击百度智能云的安全认证,复制Access Key值,并粘贴到js代码中的ak处。

本人前端部分代码(css样式未给出):

  <div class="course-video" id="course-video">
           <span class="course-data" style="display: none;" data-video-url="{{ course_detail.video_url }}"
              data-cover-url="{{ course_detail.cover_url }}">
        </span>
      </div>
<script src="https://cdn.bdstatic.com/jwplayer/latest/cyberplayer.js"></script>
<script type="text/javascript">
     let $course_data = $(".course-data");
  let sVideoUrl = $course_data.data('video-url');
  let sCoverUrl = $course_data.data('cover-url');

  let player = cyberplayer("course-video").setup({
    width: '100%',
    height: 650,
    file: sVideoUrl,
    image: sCoverUrl,
    autostart: false,
    stretching: "uniform",
    repeat: false,
    volume: 100,
    controls: true,
    ak: '7e51a849d61f47e4b888470cbbce9fae'
  });
</script>

效果展示:

猜你喜欢

转载自blog.csdn.net/wzyaiwl/article/details/89931296