video.js 移動端視訊播放器外掛心得
阿新 • • 發佈：2019-01-24
專案開發遇到視訊播放，考慮到不同移動端需要統一風格，所以選擇用視訊播放外掛。看了試了好多外掛，發現video.js用量最多（必有其好處），用法也很便捷。video.js jquery外掛庫，可直接下載不需要積分；api也有；
但是在移動端的相容不是很好。
問題：移動端上點選按鈕開始後，再次點選視訊，不會暫停。（自己測試，click事件在移動端點選視訊，不觸發（不明所以））；
解決：自己寫了js，問題解決。（用touch類事件，見程式碼）；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Video.js 6.2.8</title> <link href="css/video-js.css" rel="stylesheet"> <script src="js/jquery.js"></script> <script src="js/video.min.js"></script> <script src="js/zh-CN.js"></script> <style> body { background-color: #191919 } .m { width: 100%; height: 100%; margin-left: auto; margin-right: auto; margin-top: 100px; } </style> </head> <body> <div class="m"> <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="1000" height="400" poster="video/cover.jpg" data-setup="{}"> <source src="video/top_video.mp4" /> <source src="" type='video/webm'/> <source src="" type='video/ogg'/> <!--<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>--> <!--<!– Tracks need an ending tag thanks to IE9 –>--> <!--<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>--> <!--<!– Tracks need an ending tag thanks to IE9 –>--> </video> <script type="text/javascript"> var myPlayer = videojs('example_video_1'); videojs("example_video_1").ready(function () { var myPlayer = this; myPlayer.pause(); }); // 在此處為點選video，和點選按鈕，都新增上事件，來處理視訊的播放暫停； $('.m').on('touchstart','#example_video_1_html5_api',function () { myPlayer.pause(); $('.vjs-big-play-button').show(); }) $('.m').on('touchstart','.vjs-big-play-button',function () { myPlayer.play(); $('.vjs-big-play-button').hide(); }) </script> </div> </body> </html>