移动端video的一些坑和需求

一、android中视频下载按钮隐藏
1.css的样式
1 <style type="text/css">
2     video::-webkit-media-controls-enclosure {
3         overflow:hidden;
4     }
5     video::-webkit-media-controls-panel {
6         width: calc(100% + 30px);
7     }
8 </style>
2.去除监听事件
1 $("video").live("contextmenu",function(){//取消右键事件
2     return false;});

二、移动端自动播放

  由于手机端为了追求性能的优化,一般限制视频的自动播放,有些时候设置了auotplay属性也是无用的。这时,需要客户端的配合。

     1、ios端 

    

self.wView.allowsInlineMediaPlayback = YES;
self.wView.mediaPlaybackRequiresUserAction = NO;

  2、android

  安卓机型中有些支持autoplay="true"属性,有些不支持,可以试试以下的方法。

    1⃣️

//html
<video src="视频地址" id="video_test"></video>
//js
var _video=document.getElementById("video_test");
_video.play();
//或者
_video[0].play();

    

    2⃣️上一种方法不行,就需要封装方法给客户端调用

//js
var _video=document.getElementById("video_test");
//给android调用
var giveAndroid=function(){
    _video[0].play();
}    



原文地址:https://www.cnblogs.com/zxyGo/p/7078488.html