pc端網頁代碼 · 有點用

### 1 下載使用sewise player庫 ``` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端播放m3u8格式視頻</title> <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet"> <script src='https://vjs.zencdn.net/7.4.1/video.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>  </head> <body> <style> .video-js .vjs-tech {position: relative !important;} </style> <div> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'> <source id="source" src="http://www.vo.com/test.m3u8" type="application/x-mpegURL"></source> </video> </div> <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切換視頻</div> </body> <script> // videojs 簡單使用 var myVideo = videojs('myVideo', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, }) myVideo.play() var changeVideo = function (vdoSrc) { if (/\.m3u8$/.test(vdoSrc)) { //判斷視頻源是否是m3u8的格式 myVideo.src({ src: vdoSrc, type: 'application/x-mpegURL' //在重新添加視頻源的時候需要給新的type的值 }) } else { myVideo.src(vdoSrc) } myVideo.load(); myVideo.play(); } var src = 'http://www.vo.com/test.m3u8'; document.querySelector('.qiehuan').addEventListener('click', function () { changeVideo(src); }) </script> ```