Merge pull request #2 from ifanrx/video-audio-support

Video audio support
ifanrx · Nov 15, 2017 · 14e1ad1 · 14e1ad1
2 parents 698d854 + 05f448c
commit 14e1ad1
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 1 deletion.
diff --git a/wxParser/html2json.js b/wxParser/html2json.js
@@ -132,6 +132,27 @@ const html2json = (html, bindName) => {
         results.imageUrls.push(node.attr.src);
       }
 
+      if (node.tag === 'video' || node.tag === 'audio') {
+        node.attr.controls = !node.attr.controls ? false : true
+        node.attr.autoplay = !node.attr.autoplay ? false : true
+        node.attr.loop = !node.attr.loop ? false : true
+      }
+
+      if (node.tag === 'video') {
+        node.attr.muted = !node.attr.muted ? false : true
+      }
+
+      if (node.tag === 'audio') {
+        let params = node.attr['data-extra']
+        if (params) {
+           params = params.replace(new RegExp('&quot;', 'g'), '"');
+           params = JSON.parse(params)
+           node.attr.poster = params.poster
+           node.attr.name = params.name
+           node.attr.author = params.author
+        }
+      }
+
       if (isUnary) {
         // 自闭合标签，比如 <img src="https://github.com/pacochan/wxParser.png"/>
         // 这种类型不会进入 end 函数或者 text 函数处理，在 start 函数放入到父元素的 nodes 列表即可
@@ -156,6 +177,21 @@ const html2json = (html, bindName) => {
         olTagCount.pop()
       }
 
+      if (node.tag === 'video' || node.tag === 'audio') {
+        if (!node.attr.src) {
+          let nodes = node.nodes
+          let len = nodes.length
+          let src = ''
+          for (let i = 0; i < len; i++) {
+            if (nodes[i].tag === 'source') {
+              src = nodes[i].attr.src
+              break
+            }
+          }
+          node.attr.src = src
+        }
+      }
+
       putNode2ParentNodeList(node);
     },
     /**

diff --git a/wxParser/index.wxml b/wxParser/index.wxml
@@ -2,7 +2,28 @@
 <template name="wxParserVideo">
   <!-- 增加video标签支持，并循环添加 -->
   <view class="{{item.classStr}} wxParser-{{item.tag}}" style="{{item.styleStr}}">
-    <video class="{{item.classStr}} wxParser-{{item.tag}}-video" src="{{item.attr.src}}"></video>
+    <video class="{{item.classStr}} wxParser-{{item.tag}}-video"
+      src="{{item.attr.src}}"
+      controls="{{item.attr.controls}}"
+      autoplay="{{item.attr.autoplay}}"
+      loop="{{item.attr.loop}}"
+      muted="{{item.attr.muted}}">
+    </video>
+  </view>
+</template>
+
+<template name="wxParserAudio">
+  <view class="{{item.classStr}} wxParser-{{item.tag}}" style="{{item.styleStr}}">
+    <audio class="{{item.classStr}} wxParser-{{item.tag}}-video"
+      src="{{item.attr.src}}"
+      controls="{{item.attr.controls}}"
+      autoplay="{{item.attr.autoplay}}"
+      loop="{{item.attr.loop}}"
+      muted="{{item.attr.muted}}"
+      poster="{{item.attr.poster}}"
+      name="{{item.attr.name}}"
+      author="{{item.attr.author}}">
+    </audio>
   </view>
 </template>
 
@@ -73,6 +94,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -191,6 +217,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -308,6 +339,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -424,6 +460,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -540,6 +581,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -656,6 +702,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -772,6 +823,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -887,6 +943,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -1003,6 +1064,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -1119,6 +1185,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -1235,6 +1306,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>
@@ -1351,6 +1427,11 @@
       <template is="wxParserVideo" data="{{item}}"/>
     </block>
 
+    <!-- audio 类型 -->
+    <block wx:elif="{{item.tag == 'audio'}}">
+      <template is="wxParserAudio" data="{{item}}"/>
+    </block>
+
     <!-- img 类型 -->
     <block wx:elif="{{item.tag == 'img'}}">
       <template is="wxParserImg" data="{{item}}"/>

diff --git a/wxParser/index.wxss b/wxParser/index.wxss
@@ -141,6 +141,16 @@
   width: 100%;
 }
 
+.wxParser-audio {
+  text-align: center;
+  margin: 10rpx 0;
+}
+
+.wxParser-audio-audio {
+  display: flex;
+  flex-direction: column;
+}
+
 .wxParser-img {
   overflow: hidden;
   max-width: 100%;