11

微信小程序开发实战（15）：视频组件（video）

 3 years ago
source link: https://blog.csdn.net/nokiaguy/article/details/107625601
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
微信小程序开发实战（15）：视频组件（video）_李宁的极客世界bgJBm&nku$q$-CSDN博客

-----------支持作者请转发本文-----------

video组件用于播放网络或本地视频。video组件中最常用的属性是src，用于指定视频文件的路径，例如，下面的布局代码会播放一个网络视频文件。

一开始运行，视频并未自动播放，效果如图1所示。

format,png

图1  video组件的默认效果

点击播放按钮后，开始播放视频，效果如图2所示。

format,png

图2 video组件播放视频的效果

在前面的布局代码中，video组件还指定了binderror属性，该属性指定了如果视频文件播放出错（如路径不对），将调用的方法。该方法的代码如下：

如果视频播放出差，会在Console中输出如图3所示的日志信息。

format,png

图3  视频错误信息

如果要让视频在装载后自动播放，需要使用autoplay属性，该属性值为true，视频会自动播放，布局代码如下：

<video … … autoplay="true"></video>

下面看一下如何让video组件播放本地视频。首先在video组件下面放置一个button，点击该button，会弹出一个选择视频文件对话框，选择本地视频文件后，会自动在video组件中播放。布局代码如下：

 video组件的src属性和src变量绑定，点击button后，会调用bindButtonTap方法，该方法的实方法如下：

从这段代码看出，bindButtonTap通过调用wx.chooseVideo方法弹出了选择视频文件的对话框，如图4所示。

format,png

图4  选择视频对话框（Mac OS X）

当选择一个视频文件后，会自动播放该视频，效果如图5所示。

format,png

图5  自动播放本地视频

从日志输出结果中可以看到，本地文件名如下：

wxfile://tmp_766585555o6zAJs2t5tIf5IgXSSAKZjRtz91g1482398885788.mp4

该文件名以wxfile开头，是小程序生成的一个临时文件，将视频文件路径直接赋给src属性也可以播放，布局代码如下：

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

format,png

关注  极客起源  公众号，获得更多免费技术视频和文章。

format,png


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK