h5 video视频播放

1.0最简单的

<video width="450" height="350" controls="controls" type="video/mp4" preload="auto">
<source src="../video/data/1.mp4" autostart="false">
Your browser does not support the video tag.
</video>

preload=none的话没有画面，只有下面的panel等

preload=auto的话会显示第一针的画面

2.0

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>视频播放</title>
    </head>

    <body>
        <div class="video">

//poster 下载视频的显示的图片

// controlslist="nodownload"  不显示下载按钮

< video id ="video" controls ="controls" preload ="auto" poster ="http://download.dcloud.net.cn/FastAndroid-mini.jpg" width ="100%" height ="auto" > < source src ="http://download.dcloud.net.cn/FastAndroid-mini.m4v" type ="video/mp4" > //

// source  视频会卡顿   解决方法，直接的video标签上加上src+链接

< source src ="http://download.dcloud.net.cn/FastAndroid-mini.webm" type ="video/webm" > < source src ="http://download.dcloud.net.cn/FastAndroid-mini.ogv" type ="video/ogg" > < source src ="http://download.dcloud.net.cn/FastAndroid-mini.mp4" > </ video > </ div > < script type ="text/javascript" > // Android平台的视频全屏旋转 var fullScreenOfAndroid = function () { if ( true ) { // 最新5+API的支持 var self = plus.webview.currentWebview(); self.setStyle({ videoFullscreen: ' landscape ' }); } else { // 如果暂未更新sdk，可以先使用差量升级等方式，做出兼容处理； // 旧版本下的兼容处理 document.addEventListener( ' webkitfullscreenchange ' , function () { var el = document.webkitFullscreenElement; // 获取全屏元素 if (el) { plus.screen.lockOrientation( ' landscape ' ); // 锁死屏幕方向为横屏 } else { plus.screen.unlockOrientation(); // 解除屏幕方向的锁定 } }); } }; // iOS平台的视频全屏旋转 var fullScreenOfIos = function (videoElem) { // 监听的事件与Android平台有很大区别 videoElem.addEventListener( ' webkitbeginfullscreen ' , function () { plus.screen.lockOrientation( ' landscape ' ); // 锁死屏幕方向为横屏 }); videoElem.addEventListener( ' webkitendfullscreen ' , function () { plus.screen.unlockOrientation(); // 解除屏幕方向的锁定 }); }; // 涉及到5+API的内容，均在plusready事件后调用； document.addEventListener( ' plusready ' , function () { var osName = plus.os.name; if (osName === ' Android ' ) { fullScreenOfAndroid(); } else if (osName === ' iOS ' ) { var videoElem = document.getElementById( ' video ' ); fullScreenOfIos(videoElem); } }); </ script > </ body > </ html >