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 >