m3u8 play error No compatible source was found for this media

alterhu2020 commented 6 years ago

Vue.js version and component version

"vue": "^2.5.2",
"vue-video-player": "^5.0.2",
Reproduction Link
- JSFiddle path; https://jsfiddle.net/39epgLj0/371/
  Steps to reproduce

Run below code:


<template>
<md-card>
<md-card-actions>
  <div class="md-subhead">
    <span>HLS Live / 直播</span>
  </div>
  <md-button class="md-icon-button"
             target="_blank"
             href="https://github.com/surmon-china/vue-video-player/tree/master/examples/04-video.vue">
    <md-icon>code</md-icon>
  </md-button>
</md-card-actions>
<md-card-media>
  <div class="item">
    <div class="player">
      <video-player class="vjs-custom-skin" 
                    :options="playerOptions" 
                    @ready="playerReadied">
      </video-player>
    </div>
  </div>
</md-card-media>
</md-card>
</template>

#### What is Expected?      
play success
#### What is actually happening?

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. MediaError {code: 4, message: "No compatible source was found for this media."}code: 4message: "No compatible source was found for this media."proto: Object logByType @ video.cjs.js:450 webpackJsonp../node_modules/_video.js@6.12.1@video.js/dist/video.cjs.js.log.error @ video.cjs.js:572 error @ video.cjs.js:22682 (anonymous) @ video.cjs.js:22187 bound @ video.cjs.js:2285 (anonymous) @ video.cjs.js:4488 setTimeout (async) setTimeout @ video.cjs.js:4486 (anonymous) @ video.cjs.js:22186 setSourceHelper @ video.cjs.js:9361 setSourceHelper @ video.cjs.js:9363 (anonymous) @ video.cjs.js:9189 bound @ video.cjs.js:2285 (anonymous) @ video.cjs.js:4488 setTimeout (async) setTimeout @ video.cjs.js:4486 setSource @ video.cjs.js:9188 src @ video.cjs.js:22168 MediaLoader @ video.cjs.js:9574 addChild @ video.cjs.js:3582 handleAdd @ video.cjs.js:3704 initChildren @ video.cjs.js:3751 Player @ video.cjs.js:19747 videojs @ video.cjs.js:24214 initialize @ vue-video-player.js:1 mounted @ vue-video-player.js:1 callHook @ vue.esm.js:2921 insert @ vue.esm.js:4158 invokeInsertHook @ vue.esm.js:5960 patch @ vue.esm.js:6179 Vue._update @ vue.esm.js:2670 updateComponent @ vue.esm.js:2788 get @ vue.esm.js:3142 run @ vue.esm.js:3219 flushSchedulerQueue @ vue.esm.js:2981 (anonymous) @ vue.esm.js:1837 flushCallbacks @ vue.esm.js:1758 Promise.then (async) microTimerFunc @ vue.esm.js:1806 nextTick @ vue.esm.js:1850 queueWatcher @ vue.esm.js:3068 update @ vue.esm.js:3209 notify @ vue.esm.js:697 reactiveSetter @ vue.esm.js:1014 (anonymous) @ vue-router.esm.js:2508 (anonymous) @ vue-router.esm.js:2507 updateRoute @ vue-router.esm.js:1997 (anonymous) @ vue-router.esm.js:1875 (anonymous) @ vue-router.esm.js:1984 step @ vue-router.esm.js:1714 step @ vue-router.esm.js:1721 step @ vue-router.esm.js:1721 runQueue @ vue-router.esm.js:1725 (anonymous) @ vue-router.esm.js:1979 step @ vue-router.esm.js:1714 (anonymous) @ vue-router.esm.js:1718 (anonymous) @ vue-router.esm.js:1964 (anonymous) @ vue-router.esm.js:1757 (anonymous) @ vue-router.esm.js:1833 Promise.then (async) (anonymous) @ vue-router.esm.js:1780 (anonymous) @ vue-router.esm.js:1801 (anonymous) @ vue-router.esm.js:1801 flatMapComponents @ vue-router.esm.js:1800 (anonymous) @ vue-router.esm.js:1736 iterator @ vue-router.esm.js:1943 step @ vue-router.esm.js:1717 step @ vue-router.esm.js:1721 step @ vue-router.esm.js:1721 (anonymous) @ vue-router.esm.js:1718 (anonymous) @ vue-router.esm.js:1964 (anonymous) @ index.js:14 iterator @ vue-router.esm.js:1943 step @ vue-router.esm.js:1717 (anonymous) @ vue-router.esm.js:1718 (anonymous) @ vue-router.esm.js:1964 (anonymous) @ index.js:396 iterator @ vue-router.esm.js:1943 step @ vue-router.esm.js:1717 runQueue @ vue-router.esm.js:1725 confirmTransition @ vue-router.esm.js:1972 transitionTo @ vue-router.esm.js:1874 init @ vue-router.esm.js:2494 beforeCreate @ vue-router.esm.js:540 callHook @ vue.esm.js:2921 Vue._init @ vue.esm.js:4626 Vue @ vue.esm.js:4729 ./src/main.js @ main.js:147 webpack_require @ bootstrap ee2f2843f73d097b9d0f:712 fn @ bootstrap ee2f2843f73d097b9d0f:117 0 @ app.bundle.js?ee2f2843f73d097b9d0f:6548 webpack_require @ bootstrap ee2f2843f73d097b9d0f:712 webpackJsonpCallback @ bootstrap ee2f2843f73d097b9d0f:25 (anonymous) @ app.bundle.js?ee2f2843f73d097b9d0f:1

Awais-cb commented 5 years ago

hey @alterhu2020 have you figured it out? please post the solution

alterhu2020 commented 5 years ago

@Awais-cb ,Not sure why the reason, so I had forked a new project for this issue ,you can refer it : https://github.com/alterhu2020/vue-videojs7 ,hope this helps you. let me know if you need more help ,thanks.

apppleKey commented 5 years ago

I began to using your project three week ago，but i can't know how to use it nice ,for example I want to use some controls I can difine, even I use jQUrey in VUEjs, can I get a easy-learning Doc for your project

                        845043240

                                邮箱：845043240@qq.com

Signature is customized by Netease Mail Master

On 11/30/2018 21:14, Walter Hu wrote: @Awais-cb ,Not sure why the reason, so I had forked a new project for this issue ,you can refer it : https://github.com/alterhu2020/vue-videojs7 ,hope this helps you. let me know if you need more help ,thanks.

—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or mute the thread. {"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/surmon-china/vue-video-player","title":"surmon-china/vue-video-player","subtitle":"GitHub repository","main_image_url":"https://assets-cdn.github.com/images/email/message_cards/header.png","avatar_image_url":"https://assets-cdn.github.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/surmon-china/vue-video-player"}},"updates":{"snippets":[{"icon":"PERSON","message":"@alterhu2020 in #219: @Awais-cb ,Not sure why the reason, so I had forked a new project for this issue ,you can refer it : https://github.com/alterhu2020/vue-videojs7 ,hope this helps you. let me know if you need more help ,thanks."}],"action":{"name":"View Issue","url":"https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443199932"}}} [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443199932", "url": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443199932", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } }, { "@type": "MessageCard", "@context": "http://schema.org/extensions", "hideOriginalBody": "false", "originator": "AF6C5A86-E920-430C-9C59-A73278B5EFEB", "title": "Re: [surmon-china/vue-video-player] m3u8 play error No compatible source was found for this media (#219)", "sections": [ { "text": "", "activityTitle": "Walter Hu", "activityImage": "https://assets-cdn.github.com/images/email/message_cards/avatar.png", "activitySubtitle": "@alterhu2020", "facts": [

] } ], "potentialAction": [ { "name": "Add a comment", "@type": "ActionCard", "inputs": [ { "isMultiLine": true, "@type": "TextInput", "id": "IssueComment", "isRequired": false } ], "actions": [ { "name": "Comment", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"IssueComment\",\n\"repositoryFullName\": \"surmon-china/vue-video-player\",\n\"issueId\": 219,\n\"IssueComment\": \"{{IssueComment.value}}\"\n}" } ] }, { "name": "Close issue", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"IssueClose\",\n\"repositoryFullName\": \"surmon-china/vue-video-player\",\n\"issueId\": 219\n}" }, { "targets": [ { "os": "default", "uri": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443199932" } ], "@type": "OpenUri", "name": "View on GitHub" }, { "name": "Unsubscribe", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"MuteNotification\",\n\"threadId\": 385968935\n}" } ], "themeColor": "26292E" } ]

alterhu2020 commented 5 years ago

@apppleKey , Sorry this project is only a simple demo for using video.js 7 in vuejs style, but i had not provided detail info for usage , you can try to change the option property in video-player component as below code:

playerOptions: {
        autoplay: true,
        controls: true,
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        }
        // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg'
      }

hope this helps you, let me know if you need more further.

apppleKey commented 5 years ago

        thank you very much，as you say it a simple example.but my project need more functions there aren't in your project,so I need learn more API  about videos,can you help me?

                        845043240

                                邮箱：845043240@qq.com

Signature is customized by Netease Mail Master

        On 12/02/2018 13:42, Walter Hu wrote: @apppleKey , Sorry this project is only a simple demo for using video.js 7 in vuejs style, but i had not provided detail info for usage , you can try to change the option property in video-player component as below code:

playerOptions: { autoplay: true, controls: true, controlBar: { timeDivider: false, durationDisplay: false } // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg' }

hope this helps you, let me know if you need more further.

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread. {"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/surmon-china/vue-video-player","title":"surmon-china/vue-video-player","subtitle":"GitHub repository","main_image_url":"https://assets-cdn.github.com/images/email/message_cards/header.png","avatar_image_url":"https://assets-cdn.github.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/surmon-china/vue-video-player"}},"updates":{"snippets":[{"icon":"PERSON","message":"@alterhu2020 in #219: @apppleKey , Sorry this project is only a simple demo for using video.js 7 in vuejs style, but i had not provided detail info for usage , you can try to change the option property in video-player component as below code:\r\n\r\n\r\nplayerOptions: {\r\n autoplay: true,\r\n controls: true,\r\n controlBar: {\r\n timeDivider: false,\r\n durationDisplay: false\r\n }\r\n // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg'\r\n }\r\n\r\nhope this helps you, let me know if you need more further. \r\n"}],"action":{"name":"View Issue","url":"https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443483428"}}} [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443483428", "url": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443483428", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } }, { "@type": "MessageCard", "@context": "http://schema.org/extensions", "hideOriginalBody": "false", "originator": "AF6C5A86-E920-430C-9C59-A73278B5EFEB", "title": "Re: [surmon-china/vue-video-player] m3u8 play error No compatible source was found for this media (#219)", "sections": [ { "text": "", "activityTitle": "Walter Hu", "activityImage": "https://assets-cdn.github.com/images/email/message_cards/avatar.png", "activitySubtitle": "@alterhu2020", "facts": [

] } ], "potentialAction": [ { "name": "Add a comment", "@type": "ActionCard", "inputs": [ { "isMultiLine": true, "@type": "TextInput", "id": "IssueComment", "isRequired": false } ], "actions": [ { "name": "Comment", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"IssueComment\",\n\"repositoryFullName\": \"surmon-china/vue-video-player\",\n\"issueId\": 219,\n\"IssueComment\": \"{{IssueComment.value}}\"\n}" } ] }, { "name": "Close issue", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"IssueClose\",\n\"repositoryFullName\": \"surmon-china/vue-video-player\",\n\"issueId\": 219\n}" }, { "targets": [ { "os": "default", "uri": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443483428" } ], "@type": "OpenUri", "name": "View on GitHub" }, { "name": "Unsubscribe", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"MuteNotification\",\n\"threadId\": 385968935\n}" } ], "themeColor": "26292E" } ]

apppleKey commented 5 years ago

do you have other concat ways to send message between us,like telegram ,wechat，Facebook.....very willing to communicate with you

                        845043240

                                邮箱：845043240@qq.com

Signature is customized by Netease Mail Master

On 12/02/2018 16:34, 845043240 wrote:

        thank you very much，as you say it a simple example.but my project need more functions there aren't in your project,so I need learn more API  about videos,can you help me?

                        845043240

                                邮箱：845043240@qq.com

Signature is customized by Netease Mail Master

        On 12/02/2018 13:42, Walter Hu wrote: @apppleKey , Sorry this project is only a simple demo for using video.js 7 in vuejs style, but i had not provided detail info for usage , you can try to change the option property in video-player component as below code:

playerOptions: { autoplay: true, controls: true, controlBar: { timeDivider: false, durationDisplay: false } // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg' }

hope this helps you, let me know if you need more further.

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread. {"api_version":"1.0","publisher":{"api_key":"05dde50f1d1a384dd78767c55493e4bb","name":"GitHub"},"entity":{"external_key":"github/surmon-china/vue-video-player","title":"surmon-china/vue-video-player","subtitle":"GitHub repository","main_image_url":"https://assets-cdn.github.com/images/email/message_cards/header.png","avatar_image_url":"https://assets-cdn.github.com/images/email/message_cards/avatar.png","action":{"name":"Open in GitHub","url":"https://github.com/surmon-china/vue-video-player"}},"updates":{"snippets":[{"icon":"PERSON","message":"@alterhu2020 in #219: @apppleKey , Sorry this project is only a simple demo for using video.js 7 in vuejs style, but i had not provided detail info for usage , you can try to change the option property in video-player component as below code:\r\n\r\n\r\nplayerOptions: {\r\n autoplay: true,\r\n controls: true,\r\n controlBar: {\r\n timeDivider: false,\r\n durationDisplay: false\r\n }\r\n // poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg'\r\n }\r\n\r\nhope this helps you, let me know if you need more further. \r\n"}],"action":{"name":"View Issue","url":"https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443483428"}}} [ { "@context": "http://schema.org", "@type": "EmailMessage", "potentialAction": { "@type": "ViewAction", "target": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443483428", "url": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443483428", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { "@type": "Organization", "name": "GitHub", "url": "https://github.com" } }, { "@type": "MessageCard", "@context": "http://schema.org/extensions", "hideOriginalBody": "false", "originator": "AF6C5A86-E920-430C-9C59-A73278B5EFEB", "title": "Re: [surmon-china/vue-video-player] m3u8 play error No compatible source was found for this media (#219)", "sections": [ { "text": "", "activityTitle": "Walter Hu", "activityImage": "https://assets-cdn.github.com/images/email/message_cards/avatar.png", "activitySubtitle": "@alterhu2020", "facts": [

] } ], "potentialAction": [ { "name": "Add a comment", "@type": "ActionCard", "inputs": [ { "isMultiLine": true, "@type": "TextInput", "id": "IssueComment", "isRequired": false } ], "actions": [ { "name": "Comment", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"IssueComment\",\n\"repositoryFullName\": \"surmon-china/vue-video-player\",\n\"issueId\": 219,\n\"IssueComment\": \"{{IssueComment.value}}\"\n}" } ] }, { "name": "Close issue", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"IssueClose\",\n\"repositoryFullName\": \"surmon-china/vue-video-player\",\n\"issueId\": 219\n}" }, { "targets": [ { "os": "default", "uri": "https://github.com/surmon-china/vue-video-player/issues/219#issuecomment-443483428" } ], "@type": "OpenUri", "name": "View on GitHub" }, { "name": "Unsubscribe", "@type": "HttpPOST", "target": "https://api.github.com", "body": "{\n\"commandName\": \"MuteNotification\",\n\"threadId\": 385968935\n}" } ], "themeColor": "26292E" } ]

surmon-china / videojs-player

m3u8 play error No compatible source was found for this media #219

Vue.js version and component version

Reproduction Link

Steps to reproduce