tháng 1 2016

<html>
  
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor." />
    <meta name="keywords" content="online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor" />
    <meta name="author" content="JSFiddle" />
    <meta name="copyright" content="share alike" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />

Layout.skin = "light";// "light"
        window.addEvent('domready', function() {
          if (panel_js != 'javascript' && $('jslint')) {
            $('jslint').getParent('li').hide();
          }

$extend(Layout, new Events());
          mooshell = new MooShellActions({
            example_id: fiddleOptions.example_id,
            exampleURL: fiddleOptions.exampleURL,
            exampleSaveUrl: '/_save/',
            // sendCallbackURL: '',
            loadDependenciesURL: '/_get_dependencies/{lib_id}/',
            loadLibraryVersionsURL: '/_get_library_versions/{group_id}/'
          });
          new MooShellEditor.JS(document.id('id_code_js'), {
            language: panel_js
          }); // add user defined parameters
          new MooShellEditor.HTML(document.id('id_code_html'), {
            language: panel_html
          }); // add user defined parameters
          new MooShellEditor.CSS(document.id('id_code_css'), {
            language: panel_css
          }); // add user defined parameters
          Layout.render();

// show editors and content when the last editor loads
          // this will prevent flickering, plus looks nice
          document.id('content').setStyle('opacity', 1);

// always keep this at the bottom
          $$('select.panelChoice').each(function(sel) {
            this.switchLanguage(sel);
          }, mooshell);
        });
      </script>

ga('create', 'UA-366077-13', 'auto');
  ga('send', 'pageview', '/[user]/[fiddle]/'); // where `url_structure` is for example `/[user]/[fiddle]/[revision]/embedded/js,css/`
</script>

<title>JWPlayer Demo  - JSFiddle</title>
  </head>
  <body>
    <h1>Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.</h1>
    <h2>online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor</h2>
    <form method="post" id="show-result" target="result" action="//fiddle.jshell.net/_display/">
      
      
      <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='4BcmCLUf7dvp6q4iKPbMqGaJqW8i7zJm' /></div>
      <div id="header">
        <div id="branding">
          <p id="name" class="changelog-badge"><a title="JSFiddle " href="/" id="home" class="drop-target">JSFiddle</a></p>
        </div>
        
          <div id="actions">
  <nav class="actionCont collapsed">
    <div class="actionItem">
      <a class="aiButton" id="run" title="Run (CTRL + Return)" href="#run"><i class="bts bt-play"></i>Run</a>
    </div>

<div class="actionItem hidden">
        <a class="aiButton" id="savenew" title="Save new Fiddle (CTRL + S)" href="#save"><i class="bts bt-pencil"></i>Save</a>
      </div>
      <div class="actionItem visible">
        <a class="aiButton" id="update" title="Update (CTRL + S)" href="#update"><i class="bts bt-pencil"></i>Update</a>
      </div>
      <div class="actionItem visible">
        <a class="aiButton" id="fork" title="Fork into a new Fiddle" href="#fork"><i class="bts bt-fork"></i>Fork</a>
      </div>

<div class="actionItem">
      <a class="aiButton" id="tidy" title="Tidy messy code" href="#tidy"><i class="bts bt-align-left"></i>Tidy</a>
    </div>
    
    <div class="actionItem">
      <a class="aiButton" id="collaborate" title="Collaborate on code" href="#collaborate"><i class="bts bt-commenting"></i>Collaborate</a>
    </div>
  </nav>

<ul class="actionCont dropdown">
    <li class="actionItem visible">
      <a class="aiButton dropdownTrigger" id="share" title="Embed this Fiddle" href="#embed">Embed<i class="bts bt-angle-down rightIcon"></i></a>
      <div class="dropdownCont center">
        <div class="dcWrapper embed">

<div id="creator">
            <section>
              <h3>Tabs:</h3>
              <div class="inlineFields">
                <label class="inputCont_checkbox checkboxCont">
                  <input type="checkbox" name="tabs" value="js" checked>
                  <span class="checkbox"><i class="bts bt-check"></i></span> JavaScript
                </label>
                <label class="inputCont_checkbox checkboxCont">
                  <input type="checkbox" name="tabs" value="html" checked>
                  <span class="checkbox"><i class="bts bt-check"></i></span> HTML
                </label>
                <label class="inputCont_checkbox checkboxCont">
                  <input type="checkbox" name="tabs" value="css" checked>
                  <span class="checkbox"><i class="bts bt-check"></i></span> CSS
                </label>
                <label class="inputCont_checkbox checkboxCont">
                  <input type="checkbox" name="tabs" value="result" checked>
                  <span class="checkbox"><i class="bts bt-check"></i></span> Result
                </label>
              </div> 
            </section>

<section class="noborder">
              <h3>Visual:</h3>
              <div class="inlineFields">
                <label class="inputCont_checkbox checkboxCont">
                  <input type="radio" name="skin" value="light" checked>
                  <span class="radio"></span> Light
                </label>
                <label class="inputCont_checkbox checkboxCont">
                  <input type="radio" name="skin" value="dark">
                  <span class="radio"></span> Dark
                </label>
              </div> 
              <label class="inputCont_text">
                <input type="text" name="accentColor" maxlength="6" placeholder="Accent color">
              </label>
              <label class="inputCont_text">
                <input type="text" name="fontColor" maxlength="6" placeholder="Font color">
              </label>
              <label class="inputCont_text">
                <input type="text" name="menuColor" maxlength="6" placeholder="Menu background">
              </label>
              <label class="inputCont_text">
                <input type="text" name="bodyColor" maxlength="6" placeholder="Code background">
              </label>
            </section>

<section class="noborder">
              <h3>Embed code <a href="#" class="codeTypeToggle">Prefer iframe?</a>:</h3>
              <div class="embedCodeWrap">
<textarea class="embedCode" id="share_embedded_dropdown" data-view="embed" data-pattern-value='<script async src="{embedSrc}"></script>'>
<script async src="{embedSrc}"></script>

.container {
    position: relative;
}

.metaplayer {
    width: 600px;
    height: 300px;
    outline: 1px solid red;
}

#transcript {
    margin-top: 10px;
    outline: 1px solid black;
    width: 600px;
    height: 100px;
}

#searchbar {
    outline: 1px solid black;
    width: 600px;
}
</style>

jwp = jwplayer('target').setup({
         controls: false, // v6
         controlbar: "none", //v5
         width: "600",
         height: "300",
         autostart: true,
         icons: false, // disable a big play button on the middle of screen
         plugins: {
             viral: {
                 onpause: false,
                 oncomplete: false,
                 allowmenu: false
             }
         }, // disable all viral features.
         flashplayer: "//publishing.ramp.com/FileResource/widgets/metaplayer3/external/jwplayer/player.swf",
         file: "//googledrive.com/host/0B9XJxML9RvoSbXpGdmdLUnUzbUE/DetectiveSeaDragonx264.mp4"

});

jwp.onReady(function () {
         video = MetaPlayer.jwplayer(jwp);
         video.autoplay = true;

player = MetaPlayer(video)
             .controlbar({
             fullscreen: true
         })
             .captionconfig()
             .transcript("#transcript")
             .searchbar("#searchbar")
             .mrss("//publishing.ramp.com/FileResource/widgets/metaplayer3/examples/data/elephants.mrss.xml")
             .srt()
             .load();
     });

});
</script>

serti

Đọc thêm »

az

saria

Fiddle Author

Fiddle Meta

External Resources 5

AJAX Requests

Legal, Credits and Links

Language

Doctype

Body tag

Language

Frameworks & Extensions

Load type

Framework <script> attribute

Language

Options

serti

saria

Diff between the saved and locally drafted fiddle:

Fiddle Author

Fiddle Meta

External Resources 5

AJAX Requests

Legal, Credits and Links

Language

Doctype

Body tag

Language

Frameworks & Extensions

Load type

Framework <script> attribute

Language

Options

serti