1. 程式人生 > >寫了個html5播放視訊的video控制元件,只支援mp4和3gp(android和ios預設支援的格式就寫了這個)

寫了個html5播放視訊的video控制元件,只支援mp4和3gp(android和ios預設支援的格式就寫了這個)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>

    <div id="divVideo"></div>

   //因js水平有限,不喜勿噴,全當沒事看看,video是html5中的新控制元件,大家可以看看

    <script type="text/javascript">

        //mp4是ios、android普遍支援的格式
       function playVideo(opt) {
        if (typeof (opt) == "undefined") {
            alert("請傳入必要引數!");
            return;
        }
        if (typeof (opt.elemt) == "undefined") {
            alert("請指定播放器要插入的物件!");
            return;
        }
        if (typeof (opt.src) == "undefined") {
            alert("請指定要播放視訊的路徑!");
            return;
        }
          var _this = this;
        _this.elemt = opt.elemt;                                                             //播放器要插入的物件
        _this.src = opt.src;                                                                      //視訊的URL(必設) 
        _this.width = opt.width > 0 ? opt.width + "px" : "100%";       //寬度(預設100%) 
        _this.height = opt.height > 0 ? opt.height + "px" : "100%";  //高度(預設100%)
        _this.autoplay = opt.autoplay == "true" ? "autoplay" : "";      //自動播放(true為自動播放)
        _this.poster = opt.poster;                                                          //視訊封面,播放時的封面圖片
        _this.preload = opt.preload == "true" ? "preload" : "";          //預載入(true時啟動載入)
        _this.loop = opt.loop == "true" ? "loop" : "";                            //迴圈播放(true時迴圈播放)
        var str = "<video id='playVideo' controls ";                              //根據設定的屬性的值,拼寫video控制元件
        str += " width='" + _this.width + "' height='" + _this.height + "' " + _this.autoplay + " " + _this.preload + " " + _this.loop + " ";
        if (typeof (_this.poster) != "undefined") {
            str += " poster='" + _this.poster + "' >";
        } else {
            str += " > ";
        }
        str += " <source src='" + _this.src + "' />";
        str += "</video>";
        this.elemt.innerHTML = str;                                                      //將str放到要插入的物件中
    }

        playVideo({
            //所有引數,elemt和src為必填其他看需求怎麼要求
            //elemt為播放控制元件要插入的容器,src為視訊檔案地址,preload為預載入,autoplay是否頁面進入就自動播放
            //poster為播放前的遮照圖片,loop為是否迴圈播放,width和heigth預設100%
            elemt: document.getElementById("divVideo"),
            src: "3.mp4",
            preload: "true",
            autoplay: "true",
            poster: "",
            loop: "true",
            width: "",
            heigth:""
        });
    </script>
</body>
</html>