html5 视频播放

02 Mar 2015

对于html5的视频播放，想必听过的人都感到很兴奋吧，html播放视频不需要任何插件播放，点击就可以播放。是不是感觉很强大！

关于html播放视频的技术优势

关于视频不用插件播放，点击就能看
跨平台、好升级、好维护，开发成本相对原生APP低很多
对移动的良好支持，支持手势，本地存储和视频续播等，通过H5就可以把自己的网站移动化。
更为简洁的代码，更好的交互
支持游戏开发

看到以上的优点，是不是都迫不及待了呢！以上附上我的实例

    <!DOCTYPE html>
    <title>Video标签用法详细</title>
    <head>
    <style type="text/css">
       #source{ width:100%; height:20px; line-height:20px; border-width:0px}       
       #start{ width:100px; height:30px}     
       #pause{ width:100px; height:30px}     
       #goon{ width:100px; height:30px} 
    </style>
    
    <script type="text/javascript">
       // 获取视频开始播放
       function start() {         
       var source = document.getElementById("source");    
       var videoTest=document.getElementById("videoTest");
       if (videoTest == null) {
            var video = document.createElement("video");
            video.width = 400;
            video.height = 250;
            video.id = "videoTest";
            video.src = source.value;     //视频地址
            video.controls = true;    //html5新特性controls
            // 属性规定浏览器应该为视频提供播放控件。
            // 如果设置了该属性，则规定不存在作者设置的脚本控件。

            video.autoplay = false;   //是否自动播放
            document.body.appendChild(video);
            } else { 
              //其他动作
            }
        };     
        // 暂停视频播放
        function pause(){
           var video = document.getElementById("videoTest");
           video.pause();
        }
        // 积蓄视频播放
        function goon(){
           var video = document.getElementById("videoTest");
           video.play();
        }
    </script>
    </head>
    <body><div>
    <input id="source" value="http://demoplayer.inrete.eu/video
    /samplevideo_hq.old.mp4" type="text" />
    <p><input id="start" type="button" value="加载视频文件" 
    onclick="start();" /></p>
     <p><input id="pause" type="button" value="暂停视频文件" 
     onclick="pause();" /></p>   
     <p><input id="goon" type="button" value="继续视频文件" 
     onclick="goon();" /></p>

</div>
</body></html>

Edit - Tweet

#html5 #视频播放

Super xing

html5 视频播放

关于html播放视频的技术优势